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

目录
[隐藏]

当一个页面内容很长的时候,侧边栏栏目可能显得太短,当窗口滑动到靠下的位置,则侧边即失去了展示内容的机会。很多新闻资讯类网站如新浪、网易、CSDN等,会在边栏的右下角以固定的小弹窗形式,以提供更多的内容展示方式,但这并不适合博客和web2.0风格的网站。

现在很多的独立博客和网站如人人网等,都使用了让侧边栏模块随滚动条滑动而位置固定的效果。就是当一个页面很长的时候,设定侧栏内容会跟随滚动条,这种效果适用于评论较多、内容较长的网站。志文工作室调研了几种类似功能的实现方法,摘录之以供参考。

参考一、提高浏览量的特效:侧栏跟随滚动条

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

代码如下:

CSS部分:

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

注:每个网站的侧栏宽度不同,可根据你网页的宽度调整div1的宽度,我的是width:250px;,把这段代码添加到你的CSS文件中即可。

JS部分:

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

注:这段代码可放入任意JS文件中,比如我放在了util.js 文件里。

网页代码部分:

XML/HTML代码
  1. <div id="box">  
  2. <div id="float" class="div1">    
  3. 这里写你网站的代码与标签   
  4. </div>  
  5. </div>  

注:这里可以放文章列表、联盟广告,总之是个提高点击率的好方法。Z-blog用户把此段代码添加到single.html的侧栏位置即可。

特别提示:此代码试用与任何CMS系统,但该特效在IE6下无法实现,其余浏览器均没问题,同时侧栏其余部分应使用静态文件调用,使用JS调用栏目会出现代码重叠现象,调用联盟广告没问题。

参考二、添加侧边栏随滚动条滚动效果(示例)

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

步骤如下:

1、给侧边栏的各个模块加上一些class标志
如果你的侧边栏之前已经有了这些class标志加以区分,只要使用就可以了,不用另外加。添加ID也可以实现效果,但w3c标准不允许同一页面出现多个同样的ID,所以最好用class样式方式。

2、在网站页面中的任意js文件中加上如下代码:

JavaScript代码
  1. var rollStart = $('.Statistics'), //滚动到此区块的时候开始随动   
  2. rollOut = $('.WidgetMeta,.Statistics'); //隐藏rollStart之后的区块   
  3. rollSet = $('.RRPosts,.TagsCloud'); //添加rollStart之前的随动区块   
  4.     
  5. rollStart.before('<div class="rollbox" style="position:fixed;width:inherit;"></div>');   
  6. var offset = rollStart.offset(),objWindow = $(window),rollBox = rollStart.prev();   
  7. objWindow.scroll(function() {   
  8. if (objWindow.scrollTop() > offset.top){   
  9. if(rollBox.html(null)){   
  10. rollSet.clone().prependTo('.rollbox');   
  11. }   
  12. rollOut.fadeOut();   
  13. rollBox.show().stop().animate({top:0,paddingTop:10},400);   
  14. else {   
  15. rollOut.fadeIn();   
  16. rollBox.hide().stop().animate({top:0},400);   
  17. }   
  18. });  

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

参考三、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

侧栏模块随窗口滑动(示例页面
来源:http://www.mb-wx.com/common/msay.js
这段代码来自木本无心的博客(pjblog),原理很简单,就是当窗口到达指定模块位置后,开始判断其距离顶端的距离并进行调整。该段代码结合应用在了志文工作室博客侧边栏。
 

JavaScript代码
  1. //侧栏模块随窗口滑动   
  2. jQuery(document).ready(function($) {   
  3.  $(function() {   
  4.   var $sidebar = $("#Side_relativelog"),   
  5.   $window = $(window),   
  6.   offset = $sidebar.offset(),   
  7.   topPadding = 0;   
  8.   $window.scroll(function() {   
  9.    if ($window.scrollTop() > offset.top) {   
  10.     $sidebar.stop().animate({   
  11.      marginTop: $window.scrollTop() – offset.top + topPadding   
  12.     });   
  13.    } else {   
  14.     $sidebar.stop().animate({   
  15.      marginTop: 0   
  16.     });   
  17.    }   
  18.   });   
  19.  });   
  20. }); 

 

点赞 (1)
  1. 数学人说道:

    看到你PJ博客上的演示了,有空我也试试

  2. Lvtu说道:

    文哥整理的很详细呀!
    [reply=任侠,2012-06-04 02:29 PM]综合参考着来用已[/reply]

  3. 祝北平说道:

    博主的 主题 不错
    [reply=任侠,2012-06-04 02:28 PM]时间久了也审美疲闹[/reply]

  4. LouisHan说道:

    这个功能相当有意思啊
    [reply=任侠,2012-06-04 02:28 PM]更多的信息展示,涉及用户体验,很多博客都在用了[/reply]

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注

Captcha Code