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

WordPress教程 6187

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

实现步骤：

把以下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比较整洁，理解容易。

精品推荐：