功能描述
首先, 我认为该功能不应该出现在IE6中, 因为IE6不支持原生的 position:fixed 来固定元素位置, 如果我们使用类似回到顶部按钮淡入淡出或者滑动的跟随, 因为跟随区块较大, 这将会令用户感到不适。
当页面滚动条在跟随区域下方, 那么跟随区域变为浮动, 跟随页面滚动; 如果滚动条回到元素上方, 跟随区域回到原来的位置上. 现在就可以滚动看看本博客侧边栏的效果。
参数描述
element: 跟随区域的节点对象.
prevElement: 上方的节点对象. (已经不需要这个参数)
distanceToTop: 节点上边到页面顶部的距离.
使用步骤
1. 下载所需文件
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>
以上两段代码,请根据自己的环境选择,择其一使用即可。