上篇

让博客侧边栏跟随屏幕滚动效果

2012年11月27日 ⁄ 网络技术 ⁄ 共 1520字 ⁄ 评论数 6 ⁄ 被围观 226+

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>  

分享到： 　　

返回

作者: zhangeun

• 该日志由 zhangeun 于2962 天前发表在网络技术分类下
• 转载请注明: 让博客侧边栏跟随屏幕滚动效果 | 小Z博客 +复制链接
• 关键字: JavaScript, 侧边栏, 滚动, 跟随滚动

目前有 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楼

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