优秀的制作粘性侧边栏效果的jQuery插件：Sticky Sidebar

内容简介：优秀的制作粘性侧边栏效果的jQuery插件：Sticky Sidebar

所谓”粘性侧边栏(Sticky Sidebar)”，是指页面上侧边栏(Sidebar)的一种滚动方式，正常情况下，侧边栏是跟整个页面是一体的，当页面滚动时，侧边栏跟着一起滚动，而很多页面侧边栏内容的高度很短，很快侧边栏就会滚出浏览器可视窗口，于是，侧边栏的位置变成了空白。这个空白实际上是一种资源浪费，而”粘性侧边栏(Sticky Sidebar)”的特点是，侧边栏的位置不会形成空白，当侧边栏一旦滚动到底部，它就固定到浏览器窗口内，不在随页面一起滚动，表现出 position: sticky 的特征，这样侧边栏的位置会一直有效利用。

今天要介绍的 Sticky Sidebar 这款jQuery插件就是专门来制作”粘性侧边栏(Sticky Sidebar)”效果的。 Sticky Sidebar 的特点是API简单，而很智能，当侧边栏和侧边栏的容器有大小变化时，它能自动重新计算Sidebar的位置。而且它还支持多个”粘性侧边栏(Sticky Sidebar)”在一个页面上共存，比如，左边一个，右边一个。

下面看一下实际效果，首先一个例子是常规的应用，”粘性侧边栏(Sticky Sidebar)”在左侧：

滚动上面的演示内容里的滚动条，当快达到页面底部时，侧边栏就不随着页面滚动了，在一直驻留在浏览器可视视窗内。它的语法是：

$('#sidebar').stickySidebar({
				topSpacing: 20,
				containerSelector: '.container',
				innerWrapperClass: 'sidebar__inner'
			});

下面演示的是多个”粘性侧边栏(Sticky Sidebar)”同时存在的例子：

上面这个演示使用的代码是：

$(ELEMENT1).stickySidebar({containerSelector: '.container'});
$(ELEMENT2).stickySidebar({containerSelector: '.main-content'})

除此之外，这个Sticky Sidebar插件还有很多控制选项，比如：topSpacing，bottomSpacing，resizeSensor，minWidth等。具体API可以先看 官方文档。 它的下载地址是 这里。

以上所述就是小编给大家介绍的《优秀的制作粘性侧边栏效果的jQuery插件：Sticky Sidebar》，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持！

查看所有标签

猜你喜欢:

• 优秀的制作粘性侧边栏效果的jQuery插件：Sticky Sidebar
• 10 - 页面侧边栏：使用自定义模板标签
• 10 - 页面侧边栏：使用自定义模板标签
• Docsify CLI v4.4.3 发布，支持自动生成侧边栏文件
• CSS粘性定位是怎样工作的
• CSS粘性定位 sticky 详解（纯干货）

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。