网站上实现侧边栏跟随滚动效果

发表于2013-11-12 12:31:17来源于www.neoease.com

次点击[大] [中] [小] [打印] [关闭窗口] [评论]

网络瘫痪上不了网？电脑出故障？找破解软件？加入创想工作室QQ群，向大神求助，一步解决问题！QQ群号码：326338868。[点此获取更多QQ群]

功能描述

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

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

参数描述

element: 跟随区域的节点对象.

prevElement: 上方的节点对象. (已经不需要这个参数)

distanceToTop: 节点上边到页面顶部的距离.

使用步骤

1. 下载所需文件

这里提供原生 JavaScript 和 jQuery 两个版本可供下载：https://www.22ba.com/uploadfile/2013/1112/20131112123426464.rar

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> 

<script src="sidebar-follow-jquery.js"></script>

<script>

/* <![CDATA[ */

(new SidebarFollow()).init({

element: jQuery('#sidebar-follow'),

distanceToTop: 15

});

/* ]]> */

</script>

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

相关热词搜索：侧边栏侧边栏跟随滚动

上一篇：鼠标放在图片上显示大图

下一篇：jQuery实现跟随浏览器窗口的回到顶部按钮