博客侧边栏跟随滚动效果

评分 4.5, 满分 5 星62
Loading...
添加评论

上周博客侧边栏改版, 加上了滚动跟随的效果, 我是用 jQuery 实现的, 用之前写的回到顶部按钮改改就成的. 既然有人对这个功能感兴趣, 那我就放出来大家玩玩. 为了方便大家使用, 我会提供原生 JavaScript 和 jQuery 两个版本的脚本.

因为原理及其简单, 对其实现有兴趣的朋友自己看代码去吧.

功能描述

首先, 我认为该功能不应该出现在 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>

以上两段代码,请根据自己的环境选择,择其一使用即可。

后话

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



声明: 本文采用 BY-NC-SA 协议进行授权. 转载请注明转自: 博客侧边栏跟随滚动效果
使用连接器登录:

使用新浪微博登陆

评分 4.5, 满分 5 星62
Loading...

  1. Itas great newas, just this good news after search anewhere.
    thaks

  2. Good News, thaks

  3. Good News , Thaks

  4. Its the good news, anda very inspiration.
    nice to read this artikel.

  5. nice information
    thaks for your info

  6. baik banget

  7. yes banget

  8. yes wokey

  9. ok you

  10. baik maamen

  11. Ok Mamen

  12. yes ok

  13. yes you

  14. Thanks, this information Good, i like it

  15. very good thanksss,,

  16. thanks,,,,

  17. very good for infoo,, thanks,,

  18. nice post, i like it

  19. thanks for info.

  20. great post. say hello for all. http://www.mebelkualitas.com

  21. 私は何を理解していませんでした

  22. nice recent post

  23. 很好很强大!

  24. 这个技巧很不错啊,多谢教学和下载分享

  25. 不知道是不是我做错了,还是不可以。

  26. infonya sangat bagus, thanks...
    visi to http://furniturejatiminimalis.com/

  27. 搞定了,刚才测试没效果的是没有用那个id为sidebar-follow的div来框住你要固定的区域。

  28. 加了效果,边栏会有缓冲的效果,晃的很,是不是主题的问题

  1. Loading...

文章浏览记录
正在加载...