博客侧边栏模块跟随滚动条滑动固定效果的实现方法(js+jquery等)

侧边栏固定效果的应用背景

当页面内容较长时，侧边栏可能因高度不足而在窗口滚动至下方时失去展示价值。许多新闻资讯网站（如新浪、网易、CSDN等）采用右下角固定小弹窗的形式来增加内容曝光，但这种设计通常不符合博客及Web 2.0风格网站的审美与交互需求。

目前，包括人人网在内的众多独立博客和网站，普遍采用侧边栏模块随滚动条滑动而保持位置固定的效果。该效果特别适用于评论密集或内容篇幅较长的网站。志文工作室调研并整理了多种类似功能的实现路径，供开发者参考借鉴。

方案一：CSS结合原生JavaScript实现

方案一：实现侧栏跟随滚动条以提升浏览量的特效

来源：卢松松博客 http://lusongsong.com/reed/453.html

具体实现代码如下：

CSS样式部分：

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

注意：不同网站的侧栏宽度各异，请根据实际网页布局调整div1的width值（例如本例中的250px），并将此段代码添加至你的CSS文件中即可生效。

JavaScript逻辑部分：

JavaScript代码

//侧栏跟随
(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文件中，例如置于util.js文件内。

网页HTML结构部分：

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

注意：此处可放置文章列表、联盟广告等内容，是提升点击率的有效手段。Z-blog用户可将此段代码插入single.html文件的侧栏位置。

特别提示：该代码适用于任何CMS系统，但在IE6浏览器下无法实现此特效，其他主流浏览器均正常。此外，侧栏其余部分应使用静态文件调用，若使用JS调用栏目可能出现代码重叠现象，但调用联盟广告无此问题。

方案二：基于jQuery的DOM克隆与动画控制

方案二：添加侧边栏随滚动条滚动效果（示例）

来源：自由的风博客（http://loosky.net/?p=2028）

实施步骤如下：

1、为侧边栏的各个模块添加class标识 如果你的侧边栏已具备区分这些模块的class标识，可直接使用，无需额外添加。虽然添加ID也能实现效果，但W3C标准禁止同一页面出现多个相同的ID，因此推荐使用class样式方式。

2、在网站页面中的任意JS文件中加入以下代码：

JavaScript代码

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插件

方案三：JQUERY SCROLL FOLLOW

这是一个jQuery插件，添加步骤简便：下载压缩包并解压至网站目录，随后按照指引操作即可。 详细参考： 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

侧栏模块随窗口滑动（示例页面） 来源：http://www.mb-wx.com/common/msay.js 这段代码源自木本无心的博客（pjblog），其原理简单：当窗口滚动至指定模块位置后，开始计算其距离顶端的距离并进行动态调整。该段代码已结合应用于志文工作室博客侧边栏。 JavaScript代码

//侧栏模块随窗口滑动
jQuery(document).ready(function($) {
$(function() {
var $sidebar = $("#Side_relativelog"),
$window = $(window),
offset = $sidebar.offset(),
topPadding = 0;
$window.scroll(function() {
if ($window.scrollTop() > offset.top) {
$sidebar.stop().animate({
marginTop: $window.scrollTop() - offset.top + topPadding
    });    
} else {
$sidebar.stop().animate({
marginTop: 0
    });    
   }    
  });    
 });    
});