插件描述：纯JavaScript 插件，用于制作智能和高性能粘性侧边栏。
Sticky Sidebar
可滚动的粘性元素
特点
滚动时它不会重新计算所有尺寸，只计算必要的尺寸。
超级流畅，不会导致滚动延迟或卡顿，也不会出现页面重排。
与调整大小传感器集成以在侧边栏或其容器的大小更改时重新计算插件的所有尺寸。
它在每个词缀类型上都有事件触发器，可以在特定情况下挂钩您的代码。
与容器的其余部分相比高或太短时，请处理侧边栏。
零依赖和超级简单的设置。
用法
您网站的 html 结构必须与此类似才能正常工作：
1 2 3 4 5 6 7 8 9 10 | <div class="main-content"> <div class="sidebar"> <div class="sidebar__inner"> <!-- 内容在这里--> </div> </div> <div class="content"> <!-- 内容在这里--> </div></div> |
请注意，内部侧边栏包装器 .sidebar__innner 是可选的，但强烈推荐，如果您不自己编写，脚本将在类名内包装器粘滞下为您创建一个。但这可能会导致很多问题。
对于上面的示例，您可以使用以下 JavaScript：
1 2 3 4 5 6 7 8 9 10 | <script type="text/javascript" src="./js/sticky-sidebar.js"></script><script type="text/javascript"> var sidebar = new StickySidebar('.sidebar', { topSpacing: 20, bottomSpacing: 20, containerSelector: '.main-content', innerWrapperSelector: '.sidebar__inner' });</script> |
通过 jQuery/Zepto
您可以将粘性侧边栏配置为 jQuery 插件，只需包含 jquery.sticky-sidebar.js 而不是 sticky-sidebar.js 文件，而不是将其配置为任何 jQuery 插件。
1 2 3 4 5 6 7 8 9 | <script type="text/javascript" src="./js/jquery.js"></script><script type="text/javascript" src="./js/jquery.sticky-sidebar.js"></script><script type="text/javascript"> $('#sidebar').stickySidebar({ topSpacing: 60, bottomSpacing: 60 });</script> |
确保在 jquery.js 之后包含 sticky-sidebar.js 脚本文件。
浏览器支持
粘性侧边栏适用于所有现代浏览器，包括 Internet Explorer 9 及更高版本，但如果您希望它与 IE9 一起使用，则应在粘性侧边栏代码之前包含 requestAnimationFrame polyfill。
特别申明：
本站所有资源都是由网友投稿发布，或转载各大下载站，请自行检测软件的完整性！
本站所有资源仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您自己承担！
如有侵权请联系我们删除下架，联系方式：lei1294551502@163.com
- 上一个特效： 纯CSS背景循环滚动动画
- 下一个特效： jQuery滑动手风琴效果