jQuery实现侧边栏随滚动条滚动并固定位置

WordPress 教程 4年前 (2014-01-19) 6,113 人围观 11

WP酷在之前分享过简单实现侧边栏跟随页面滚动效果,可该代码有一个重大缺陷——滑动的元素只能在最后面,否则会把其它内容盖住。有什么其它的好方法吗?草野时代博主总结了几个测试完美无BUG的实现侧边栏随滚动条滚动并固定位置代码,大家可以试一下。以下三种方法任选其一使用,需要按照自己网站的问题稍稍修改才能正常运行。

常用的CDN引用安装JQuery:

 

侧边栏滚动结束时固定设定模块

利用这串代码,可以自动获取侧边栏高度,当侧边栏滚动结束后,设定的模块激活并固定在屏幕中,IE6无效
默认支持两个模块,如果需要增加模块要在第二行添加变量并参照第8行的代码为新变量添加启动的参数。

 

当滚动到指定模块时置顶该模块

下面这串代码适合侧边栏较长的用户,如有JavaScript加载的模块高度会判断出错,建议侧边栏没有JavaScript模块的用户使用。
当滚到#suggested 时置顶该模块,可以按自己的需要修改。

 

滚动到一定像素后固定显示

类似于当滚动到指定模块时置顶该模块,不同之处是设定固定的高度,卷动到该高度时显示置顶的模块。

默认给出的是卷动368像素后侧边栏#sidebar 整体跟随滑动,适合侧边栏少的网站。