现在的位置: 首页 > 网络技术 > 正文
让博客侧边栏跟随屏幕滚动效果
2012年11月27日 网络技术 ⁄ 共 1520字 评论数 6 ⁄ 被围观 224+

1. 下载文件

提供原生 JavaScript 和 jQuery 两个版本下载:从 GitHub 下载

2. 插入 JavaScript 和添加执行脚本

在页面底部 </body> 之前加入代码

原生 JavaScript:

  1. <script src="sidebar-follow.js"></script>   
  2. <script>   
  3. /* <![CDATA[ */  
  4. (new SidebarFollow()).init({   
  5.     element: 'sidebar-follow',   
  6.     prevElement: 'recent-comments',   
  7.     distanceToTop: 15  
  8. });   
  9. /* ]]> */  
  10. </script>  

jQuery:

  1. <script src="jquery.js"></script> <!-- 如果已在网站的其他地方引入 jQuery, 请不要在次引入 -->   
  2. <script src="sidebar-follow-jquery.js"></script>   
  3. <script>   
  4. /* <![CDATA[ */  
  5. (new SidebarFollow()).init({   
  6.     element: jQuery('#sidebar-follow'),   
  7.     prevElement: jQuery('#recent-comments'),   
  8.     distanceToTop: 15  
  9. });   
  10. /* ]]> */  
  11. </script>  

参数:

  • element: 跟随区域的节点对象
  • prevElement: 上方的节点对象
  • distanceToTop: 节点上边到页面顶部的距离

方法二:
JS:
  1. <script type="text/javascript">   
  2. jQuery(document).ready(function() {   
  3.     var a = $("#abc").offset();   
  4.     $(window).scroll(function() {   
  5.         var b = $(window).scrollTop();   
  6.         if (b > a.top + 40) {   
  7.             $("#abcad").addClass("fixed")   
  8.         } else {   
  9.             $("#abcad").removeClass("fixed")   
  10.         }   
  11.     });   
  12. });   
  13.  </script>  

CSS:

  1. .fixed {   
  2.     position:fixed;   
  3.     top:40px;   
  4.     width:300px;   
  5. }  

PHP:

  1. <div id="abc">   
  2.               <div id="abcad">   
  3. <center style="background: url(http://x.libdd.com/farm1/2893f5/18a75936/hello.gif) no-repeat center;height: 250px;">   
  4. <!-- 广告位:300*250 -->   
  5. <script type="text/javascript" >BAIDU_CLB_SLOT_ID = "491497";</script>   
  6. <script type="text/javascript" src="http://cbjs.baidu.com/js/o.js"></script>   
  7. </center>   
  8.                 </div>   
  9. </div>  
分享到:   

目前有 6 条留言 其中:访客:6 条, 博主:0 条

  1. 菜鸟网赚博客 : 2013年09月10日16:37:59  1楼

    没看懂…

  2. 番茄 : 2013年11月05日20:19:26  2楼

    伤不起啊伤不起,看到代码就头大。我折腾这种浮动代码好几种了都没成功。

  3. 最励志网 : 2015年08月01日09:46:52  3楼

    好久没来了,过来踩踩

  4. 歪妖内涵网 : 2015年08月25日18:19:36  4楼

    不错哦,赞一个。求认识,求回访

  5. 爱奇趣分享网 : 2015年09月07日14:00:32  5楼

    我来留下脚印

  6. 糗事百科 : 2015年10月01日10:18:57  6楼

    不错哦,赞一个。求认识,求回访