实现wordpress随滚动条固定滚动效果

WordPress教程 5521

最近博客吧喜欢上用户体验这个词,因此想逐步把博客吧打造成具有较高用户体验的博客,虽然目前我不再对博客吧进行优化,但也无法阻挡我对他的热爱。侧栏是博客相对重要的区域,往往会放上某些文章列表来推荐给用户,可有时候当文章内容较长的时候,侧边会空白一大块,显然浪费地方,且用户想看侧栏的文章列表时,还在往上拉,这不就是用户体验差的表现吗?因此我绝定将其随滚动条固定。

实现步骤:

把以下jQuery代码放在</head>前面,或者</body>前面,后者比较好

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
//侧栏随动
(function(){
    var oDiv=document.getElementById("cateposts");
    var H=0,iE6;
    var Y=oDiv;
    while(Y){H+=Y.offsetTop;Y=Y.offsetParent};
    iE6=window.ActiveXObject&&!window.XMLHttpRequest;
    if(!iE6){
        window.onscroll=function()
        {
            var s=document.body.scrollTop||document.documentElement.scrollTop;
            if(s>H){oDiv.className="widget div2";if(iE6){oDiv.style.top=(s-H)+"px";}}
            else{oDiv.className="widget";}   
        };
    }
 
})();

这是博客吧的右栏html代码:

1
2
3
4
<li class="widget" id="cateposts">
<h3 class="widgettitle">标题</h3>
调用代码
</li>

下面是博客吧右栏css样式代码:

1
2
#sidebar li {list-style-type: none; margin: 0 0 10px; overflow:hidden; padding:14px; border:1px solid #bbb; background:#fff; width:330px;}
.div2 {position:fixed;_position:absolute;top:3px;z-index:295; width:300px;}

提醒:这是符合博客吧的模板代码,演示效果看右栏,测试支持IE7、Ie8、Firefox、Chrome浏览器,IE6无效果无错位,其余浏览器没有测试。如果你不明白,可以查看IM路人的原版代码,地址是http://imluren.com/2011/08/jquery-roll-fixed.html比较整洁,理解容易。

精品推荐: