jQuery实现页面滚动时固定侧边栏效果

博客文章比较长的时候，侧边栏很容易变得很空，这种情况下，在侧边栏显示些推荐文章、分类或者标签，都是很不错的，可以方便访问者浏览其他文章，间接增加访问者停留的时间。

几个月前就弄过这样的效果，但是没成功，在一些浏览器下显示效果不好，今天看了一篇文章，JS代码写的不错，就稍微修改了下，实现了随着鼠标滚动到侧边栏消失后，显示固定的标签云模块的效果，见下图：

JS的实现原理实际上就是给要显示的模块增加上『position:fixed;』的CSS样式，固定模块，随着鼠标滚动，当滚动条的垂直偏移量超过了指定高度时显示模块，低于指定高度时则隐藏。如果要想将侧边栏的最后一个模块固定，代码就简单多了，在滚动事件内给最后一个模块附上CSS属性即可。

需要按各自的需求修改相应代码，完整的JavaScript代码如下：

//固定tag cloud
jQuery(function ($) {
    //指定的高度，侧边栏距顶部距离+侧边栏高度+可视页面的高度
    var sideTop=$("#sidebar").offset().top+$("#sidebar").height()+$(window).height();
    var scTop = function() {
    if( typeof window.pageYOffset != 'undefined') {
        return window.pageYOffset;
    } else if( typeof document.compatMode != 'undefined' && document.compatMode != 'BackCompat') {
        return document.documentElement.scrollTop
    } else if( typeof document.body != 'undefined') {
        return document.body.scrollTop;
    }
}

$(window).scroll(function() {
        if (scTop() > sideTop) {
        if($("#fixed-siderbar").length == 0){
            //下面是要显示的模块，复制侧边栏中的标签云内容，追加到侧边栏的底部
            var tag = $("#tag_cloud-2 .widget-wrap").clone().html();
            var html="<div id='fixed-siderbar'><div id='fixed-wrap'><div id='fixedTag' class='widget  widget_tag_cloud' >"+ tag +"</div></div></div>"
            $("#sidebar").append(html);
        }else{
            $("#fixed-siderbar").show();
        }
    }else{
        $("#fixed-siderbar").hide();
    };
  });
});
最后附上我的CSS，同样按需修改：

#fixed-siderbar{
    z-index: 0;
    position:fixed;
    top:70px;
}

经测试，在Chrome、Firefox、Safari和IE中显示正常，就是根据浏览器或显示器分辨率的不同，显示的垂直位置也不同，在iPhone中浏览会有稍微的卡顿。欢迎大家给出更好的获取垂直偏移量的方法！