請選擇 進入手機版 | 繼續訪問電腦版

東里論壇

 找回密碼
 立即註冊

QQ登录

只需一步,快速开始

搜索
查看: 2410|回復: 0

[使用心得] 侧栏跟随(侧边栏固定)插件,将跟随滚动的侧边栏限制在一定区域中

[複製鏈接]

312

主題

459

帖子

2910

積分

管理員

Rank: 9Rank: 9Rank: 9

積分
2910
發表於 2016-2-14 11:48:43 | 顯示全部樓層 |閱讀模式
侧栏跟随,或者叫侧栏固定。很多时候,我们在设计HTML页面时,总会分成几个栏,比较流行的是左中右三栏,和左右两栏。一般来说,三栏的以中间一栏为主要内容的容器,左右两边为侧边栏;二栏的目前比较流行左边为主要内容,右边为侧边栏。

一般来说,侧边栏的内容会比较少,如果页面上的主要内容很多,导致整个页面很长,需要向下滚动时,会造成侧边栏向上滚动而不可见。但有时我们会希望侧边栏中的内容自进入可视区域后,能跟随页面滚动,一直保持在浏览器的固定位置中,提高侧边栏内容的展现率和点击率。

网上有很多实现这个功能的JS或jquery代码,我在网上找了很久,尝试了很多的代码,结果都不太满意。主要问题,如果侧栏比较长,跟随滚动时,有可能会覆盖掉页脚的部分内容。所以我需要一个能将跟随滚动的模块限制在一定区域中的代码或插件,这时就需要使用JS代码来实现了,CSS目前是无法实现的。

经过不懈寻找,终于被我找到两款 jquery 插件可以完美实现侧栏跟随滚动,而又限制在父DIV模块中(或者在脚部模块进入可视区域时侧边栏不再向下滚动),不会覆盖页面脚部的内容了。

这两个插件是: SCROLL FOLLOW 和 jSticky master 。

SCROLL FOLLOW 经过测试,不支持新版本的 jquery ,而且需要 jQuery UI Core 插件的支持。官方文档说的是 jquery 需要1.2.6,而 jQuery UI Core 需要1.5.2。不过我测试过1.4.4的 jquery ,也可以支持的;但1.11.2就无效。其他版本未测试,但其不支持新版本的特性,对于需要 jquery 新版本功能的网站来说不太适合。

jSticky master 则支持新版 jquery ,而且不需要 jQuery UI Core 。不过 SCROLL FOLLOW 在滚动时有动画特效,可以设置延迟的时间,jSticky master 则是直接跟随滚动。但对我来说,这个动画特效其实有没有都一样。所以我最终选择了 jSticky master 。

另外一点,这两个插件都可以实现多个模块跟随滚动。

jSticky master 使用方法比较简单:

第一步:加载 jSticky-master 插件

  1. <script type="text/javascript" src="jquery-1.8.1.min.js"></script>
  2. <script type="text/javascript" src="jquery.jsticky.js"></script>
複製代碼


第二步,HTML中需要滚动的模块,用class指定类名为sticky:

  1. <div class="sticky">//sticky可以发成是别的,也可以使用ID选择器
  2. 这里是跟随滚动模块。
  3. </div>
複製代碼


第三步:利用 jquery 选择器选择指定的侧边栏内容。

  1. <script type="text/javascript">
  2.     $(function(){

  3.         $(".sticky").sticky({  //(".sticky")是指定的需要滚动的模块
  4.             topSpacing: 58, //距离页面顶部的距离,可自行设置
  5.             zIndex:2,//指定堆叠顺序
  6.             stopper: "#footer" //当“footer”进入可视区域后“sticky”模块不再滚动,注意前面的“#”,表示这是id选择器。
  7.         });

  8.     });
  9. </script>
複製代碼


其实 Discuz! X3.2 本身就有这个功能,大家只要注意在将本帖向下滚动时,左侧的用户资料区就会跟随滚动,而且是限制在一定区域中的(各个楼层都是这种效果,滚动只限制在本楼层的区域内),但是我还不会分析代码,只能拿来就用,所以没法找到 Discuz! X3.2 中哪些代码是实现这一功能的。


jSticky master下载:http://page25.ctfile.com/file/142849391


附上几个类似的插件名称,以便日后试用:
1. Sticky
2. stickyMojo
3. Sticky Sidebar jQuery plugin
4. lockfixed jQuery plugin
5. stickyfloat
6. Sticklr
7. fixedposition
8. jQuery Sticky Sidebar
9. jquery.fixer.js
回復

使用道具 舉報

您需要登錄後才可以回帖 登錄 | 立即註冊

本版積分規則

QQ|小黑屋|手機版|Archiver|東里論壇 ( 粤ICP备14015598号 ) 公安备案图标粤公网安备 44512202000019号

GMT+8, 2020-8-13 02:01 , Processed in 0.531253 second(s), 31 queries , Gzip On.

Powered by Discuz! X3.4

© 2001-2017 Comsenz Inc.

快速回復 返回頂部 返回列表