WordPress 侧边栏实现随滚动条滑动固定的效果

分类栏目：用户体验 - 前端开发

版权信息： 原创作品、版权所有，禁止匿名转载，分享请注明版权。

45046

发布于 23 条评论

最近在一些博客看到侧边栏某些板块，随着滚动条的滑动，而跟着滑动或者固定的效果，感觉非常的人性化，一来可以弥补当一个页面很长，但侧边栏太短的时候的空白，二来可以合理利用空间展示更多信息，可以大大的提高曝光率和点击率。这样子的效果很适合于文章的列表（比如月度排行、热门文章之类的），还有适合于广告联盟的展示。所以去网上找了一些资料，整理了一下，现在分享给大家，也方便以后自己查阅，希望对大家有用。

效果一：侧边栏固定模块

来源：卢松松博客

Js代码

//侧栏跟随
(function() {
    var oDiv = document.getElementById("float");
    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 = "div1 div2";
                if (iE6) {
                    oDiv.style.top = (s - H) + "px";
                }
            } else {
                oDiv.className = "div1";
            }
        };
    }
})();

注：为了减少js文件引用，这段代码可放入任意JS文件中
CSS代码：

/*侧栏跟随*/
#box_float {float:left; position:relative; width:250px;}
.div1 {width:250px;}
.div2 {position:fixed; _position:absolute; top:0; z-index:999;}

注：样式代码仅为参考，具体的调整，请结合自己的网站调整。
HTML代码：

<div id="box_float">
  <div id="float" class="div1">
  这里写你网站的代码与标签
  </div>
</div>

注：这里可以放文章列表、联盟广告，总之是个提高点击率的好方法。wordpress用户把此段代码添加到sidebar.php的侧栏位置即可。
特别提示：此代码试用与任何CMS系统，但该特效在IE6下无法实现，其余浏览器均没问题，同时侧栏其余部分应使用静态文件调用，使用JS调用栏目会出现代码重叠现象，调用联盟广告没问题。

效果二：侧边栏随窗口滚动（滑动效果）

来源：知更鸟
实现这个随窗口滚动效果，首先主题必须加载jQuery。已经完美解决侧边栏会顶着页脚无限滚下去的bug，一起看看代码：

<script type="text/javascript">
var documentHeight = 0;
var topPadding = 15;
$(function() {
    var offset = $("#sidebar").offset();
    documentHeight = $(document).height();
    $(window).scroll(function() {
        var sideBarHeight = $("#sidebar").height();
        if ($(window).scrollTop() > offset.top) {
            var newPosition = ($(window).scrollTop() - offset.top) + topPadding;
            var maxPosition = documentHeight - (sideBarHeight + 368);
            if (newPosition > maxPosition) {
                newPosition = maxPosition;
            }
            $("#sidebar").stop().animate({
                marginTop: newPosition
            });
        } else {
            $("#sidebar").stop().animate({
                marginTop: 0
            });
        };
    });
});
</script>

将上述javascript代码加到主题头部header.php模版中。修改其中的#sidebar为你的主题侧边选择器名称；根据不同的主题头部模版高度，适当调整其中的数字“368”。

效果三：添加侧边栏随滚动条滚动效果（无滑动）

来源：自由的风博客
给侧边栏的各个模块加上一些class标志，如下图框框里面的内容：

gundong
如果你的侧边栏之前已经有了这些class标志加以区分，只要使用就可以了，不用另外加。
在主题的js文件中加上如下代码：

var rollStart = $('.Statistics'), //滚动到此区块的时候开始随动
	rollOut = $('.WidgetMeta,.Statistics'); //隐藏rollStart之后的区块
	rollSet = $('.RRPosts,.TagsCloud'); //添加rollStart之前的随动区块

rollStart.before('<div class="rollbox" style="position:fixed;width:inherit;"></div>');
var offset = rollStart.offset(),objWindow = $(window),rollBox = rollStart.prev();
objWindow.scroll(function() {
	if (objWindow.scrollTop() > offset.top){
		if(rollBox.html(null)){
			rollSet.clone().prependTo('.rollbox');
		}
		rollOut.fadeOut();
		rollBox.show().stop().animate({top:0,paddingTop:10},400);
	} else {
		rollOut.fadeIn();
		rollBox.hide().stop().animate({top:0},400);
	}
});

注：滚动区域的内容不能太长，不然会出现无限下拉的情况。

效果四：JQUERY SCROLL FOLLOW

这是一个插件，添加步骤很简单，操作简单就是使用插件的好处，下载压缩包解压到网站目录，然后按照步骤操作即可。但个人不推荐插件，能用代码实现的效果，就不用插件。
插件下载地址：http://kitchen.net-perspective.com/open-source/scroll-follow/
示例页面：
http://kitchen.net-perspective.com/sf-example-1.html
http://kitchen.net-perspective.com/sf-example-2.html
http://kitchen.net-perspective.com/sf-example-3.html
http://kitchen.net-perspective.com/sf-example-4.html
赶紧去试试看吧，总会有一种效果适合你的。有什么问题可在下面留言哦。

相关推荐

全部评论 / 23

  1. 木易杨

    用第二个办法，但是左侧还是会超过右侧很长的距离。。怎么才能底部的class那就暂停就好了。。

    木易杨 2012-09-19
    20

  2. 侧栏是左侧栏，还是右侧栏？三栏的主题怎么改？

    望星湖畔 2012-09-19
    19

  3. sideBarHeight + 368

    这个从哪里查？

    望星湖畔 2012-09-19
    18

  4. 楼主左面的那个齿轮标志是怎么添加的？

    jipeng 2012-09-19
    17

  5. 你的侧边栏也真够长的哈

    番茄 2012-09-19
    16

  6. 正是我需要的，不过代码的东西有点头痛。我试着看看。

    唐浚恒 2012-09-19
    15

  7. 看到代码就头大，伤不起哎。

    番茄 2012-09-19
    14

  8. 体验不错！

    智享互联 2012-09-19
    13

  9. 请问效果3中的“class标志”应该在哪里查看？
    我要如何知道某个侧边栏是否有了class标志？如果没有的话要怎么添加呢

    Capbone 2012-09-19
    12
    1. Javin

      侧边栏的源文件，如果没有相对应的class名称，就添加。

      1号 Javin 2012-09-19

  10. 用了MG12的办法

    fenng 2012-09-19
    11

  11. 这个效果现在还是比较流行的。我个人比较喜欢第二种方法。

    sprityaoyao 2012-09-19
    10

  12. 蛮漂亮的，mark

    flor 2012-09-19
    9

  13. 很牛逼，收藏O(∩_∩)O~~

    正仔 2012-09-19
    8

  14. 有的主题已经集成了。

    byncc 2012-09-19
    7

  15. 请问博主，我如下代码，用来固定侧边栏的一个栏目怎样让支持更多的栏目？还希望能够看下是否正确。window.onscroll = setFixed;
    if(document.getElementById("ads_r")){
    var oElement = document.getElementById("ads_r");
    }else{
    var oElement = document.getElementById("rank_new_list");
    }
    var posTop = oElement.offsetTop;
    var temp = posTop;
    function setFixed() {
    var VersionHeight = document.getElementById("version").style.height;
    var bodyTop = document.documentElement.scrollTop + document.body.scrollTop;
    if(bodyTop > posTop){
    oElement.style.position="fixed";
    oElement.style.top= VersionHeight;
    oElement.style.zIndex="99999";
    }
    if(bodyTop 0){
    oTop.style.display="block";
    }else{
    oTop.style.display="none";
    }
    }

    clearsky 2012-09-19
    6
    1. Javin

      总觉的代码怪怪的，去了你的网站看了下源代码，原来代码没贴完整 :?:
      最简单的方法其实不用修改现有的js，直接用一个div把你想要的栏目包围起来，然后这个div的id为rank_new_list就行了。
      <dl id="rank_user_list" class="rank_list">……</dl>
      <dl id="rank_new_list" class="rank_list default">……</dl>
      修改为：
      <div id="rank_new_list">
      <dl id="rank_user_list" class="rank_list">……</dl>
      <dl id="" class="rank_list default">……</dl>
      </div>
      如果这样子达不到你要的效果，建议你采用上面的方法。

      1号 Javin 2012-09-19

      1. 嗯，那我还是研究研究上边的代码，我想在我网站把左侧的样式和右侧的最新文章的一样的效果，谢谢博主……

        clearsky 2012-09-19

  16. 这个博客的主题还是蛮喜欢的

    贝壳 2012-09-19
    5

  17. :smile: 这个没事可以研究下

    那时年少 2012-09-19
    4

  18. 这个好，明天研究研究去

    www.52wulian.org 2012-09-19
    3

  19. 这个效果用上了

    左右视界 2012-09-19
    2