脚本实现博客侧边栏跟随滚动效果
A-A+

脚本实现博客侧边栏跟随滚动效果

2013年05月19日 网站管理 暂无评论 阅读 加载中...

最近看到别人博客右边的侧边可以跟随滚动条一起滚动,觉得很炫,于是借鉴学习把玩了一下,感觉还不错,分享给大家。实现的方式包括纯javascript的和使用jquery类库的。

功能描述

首先, 我认为该功能不应该出现在 IE6 中, 因为 IE6 不支持原生的 position:fixed 来固定元素位置, 如果我们使用类似回到顶部按钮淡入淡出或者滑动的跟随, 因为跟随区块较大, 这将会令用户感到不适.

当页面滚动条在跟随区域下方, 那么跟随区域变为浮动, 跟随页面滚动; 如果滚动条回到元素上方, 跟随区域回到原来的位置上. 现在就可以滚动看看本博客侧边栏的效果.

参数描述

  • element: 跟随区域的节点对象.
  • distanceToTop: 节点上边到页面顶部的距离.

使用步骤

1. 下载所需文件

这里提供原生 JavaScript 和 jQuery 两个版本可供下载:
下载地址:360云盘

2. 插入 JavaScript 和添加执行脚本

在页面底部 </body> 之前加入代码, 原生 JavaScript 例子如下:

使用 jQuery 环境的例子如下:

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

后话

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

小林注:小林在实践过程中发现2点需要注意的

  1. 需要浮动的div要在样式中固定宽度,不然浮动的时候div会变形
  2. 需要浮动的div要有同级结点,不然在ie下会抛脚本错误,如下,这里缺了div1,就会抛错

             |—parentDiv

                        |—div1

                        |—followDiv

小林在主题中引入的方法

步骤一:在下载的纯脚本中添加如下函数

步骤二:在需要浮动的区域,一般是侧边栏最底下部位的div中添加一个id

步骤三:在</body>前添加如下脚本

说明:小林已经在把这个功能的脚本合并到自己主题的总脚本中了(减少请求次数,所以小林可以在页面直接调用脚本里的函数了)

参考:博客侧边栏跟随滚动效果

Copyright © 小林博客 保留所有权利.  

用户登录

分享到: