博客侧边栏跟随滚动效果
mg12提供的这个方法是就成熟的!喜欢的人可以参考一下。
原文:博客侧边栏跟随滚动效果
功能描述
首先, 我认为该功能不应该出现在 IE6 中, 因为 IE6 不支持原生的 position:fixed
来固定元素位置, 如果我们使用类似回到顶部按钮淡入淡出或者滑动的跟随, 因为跟随区块较大, 这将会令用户感到不适.
当页面滚动条在跟随区域下方, 那么跟随区域变为浮动, 跟随页面滚动; 如果滚动条回到元素上方, 跟随区域回到原来的位置上. 现在就可以滚动看看本博客侧边栏的效果.
参数描述
- element: 跟随区域的节点对象.
prevElement: 上方的节点对象.(已经不需要这个参数)- distanceToTop: 节点上边到页面顶部的距离.
使用步骤
1. 下载所需文件
这里提供原生 JavaScript 和 jQuery 两个版本可供下载:
从 GitHub 下载
2. 插入 JavaScript 和添加执行脚本
在页面底部 </body>
之前加入代码, 原生 JavaScript 例子如下:
<script src="sidebar-follow.js"></script> <script> /* <![CDATA[ */ (new SidebarFollow()).init({ element: 'sidebar-follow', distanceToTop: 15 }); /* ]]> */ </script> |
使用 jQuery 环境的例子如下:
<script src="jquery.js"></script> <!-- 如果已在网站的其他地方引入 jQuery, 请不要在次引入 --> <script src="sidebar-follow-jquery.js"></script> <script> /* <![CDATA[ */ (new SidebarFollow()).init({ element: jQuery('#sidebar-follow'), distanceToTop: 15 }); /* ]]> */ </script> |
后话
这个区域主要用于了推荐热门文章和增加广告展示, 希望增加用户逗留时间和广告点击率. 侧边栏跟随功能的开发很简单, 我一直不做是担心页面太多浮动区域影响用户阅读, 但现在页面跟随区域已经被广泛使用, 用户也习惯了那我也跟风加上. 现分享出来, 希望对其他站长也有帮助.
一条评论
文件下载呢 那个