博客侧边栏跟随滚动效果

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>

后话

这个区域主要用于了推荐热门文章和增加广告展示, 希望增加用户逗留时间和广告点击率. 侧边栏跟随功能的开发很简单, 我一直不做是担心页面太多浮动区域影响用户阅读, 但现在页面跟随区域已经被广泛使用, 用户也习惯了那我也跟风加上. 现分享出来, 希望对其他站长也有帮助.