ICode9

精准搜索请尝试: 精确搜索
首页 > 互联网> 文章详细

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

2020-08-15 13:35:30  阅读:86247  来源: 互联网

标签:


所谓”粘性侧边栏(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可以先看官方文档。它的下载地址是这里。

标签:
来源: https://www.webhek.com/post/jquery-plugin-sticky-sidebar.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有