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

栏目: jQuery · 发布时间: 6年前

内容简介:优秀的制作粘性侧边栏效果的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》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

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

热点

热点

【美】马克•舍费尔(Mark Shaefer) / 曲秋晨 / 中国人民大学出版社 / 2017-1 / 49.00

你是不是常常困惑: 我创作内容,利用社交媒体,并紧跟每一次数字营销的创新和新平台的运作,可为什么我的业务和影响力没有明显起色? 2015年至2020年间,网络信息量将增长五到十倍,信息极度过剩。如何让你的内容脱颖而出?《热点》由全球顶尖营销专家马克•舍费尔所著,详尽披露如何收获核心粉丝、形成社会认同、引爆热点,进而成功塑造伟大的企业和个人品牌。一起来看看 《热点》 这本书的介绍吧!

图片转BASE64编码
图片转BASE64编码

在线图片转Base64编码工具

随机密码生成器
随机密码生成器

多种字符组合密码

MD5 加密
MD5 加密

MD5 加密工具