jQuery侧边栏固定跟随滚动的实现方法

在我们搭建网站的时候，有时候页面主内容比较长，导致侧边栏显示空白，这个时候，一个智能且流畅的固定侧边栏能够提升用户体验，使用户在浏览长页面时始终保持关键信息的可见性。

当用户滚动页面时，侧边栏可以固定在屏幕的一侧，显示如导航菜单、目录、广告或者相关文章等重要信息，同时可以获得更高的点击率。

网上这类代码或者插件还是比较多的，比如：theia-sticky-sidebar。他整体效果挺好，还可以支持多列的跟随滚动。

不过对于只是单栏想简单实用这个功能，还有一个q2w3-fixed-widget，这个相比上面的要更加精简一些，它有Wordpress插件：Fixed Widget and Sticky Elements for WordPress，可以直接安装插件使用。

当然对于非Wordpress的用户，可以直接使用它的代码来实现，很简单。Fixed Widget这个插件6.0版本开始重构了代码，不再依赖jQuery，当然这样js的代码量也就增加了不少，对于网站本身使用了JQuery的来说，使用最后的5.3.0版本就合适一些。

演示地址

在演示页面，右侧的模块“滕王阁”会随着页面的滚动，而固定在浏览器的右侧，当遇到底部的图片时，停止元素会将其向上推动，不会继续固定而覆盖底部的元素。

具体使用方法

1、页面引入了jQuery

2、配置跟随滚动模块id

给需要跟随滚动的模块设置id，比如id="sidebar-follow"

3、配置选项

var q2w3_sidebar_options = [{
	"sidebar": "q2w3-default-sidebar",
	"margin_top": 0,	//上边距
	"margin_bottom": 0,	//下边距
	"stop_id": "bottom",	//停止ID
	"screen_max_width": 0,	//停用宽度，当浏览器屏幕宽度小于指定值时，跟随滚动将被禁用。
	"screen_max_height": 0,	//停用高度，当浏览器屏幕高度小于指定值时，跟随滚动将被禁用。
	"width_inherit": false,
	"refresh_interval": 1500,
	"window_load_hook": false,
	"disable_mo_api": false,
	"widgets": ["sidebar-follow"]	//跟随滚动模块的id
}];

其中特别注意 widgets 和 stop_id 。

widgets，里面放的是要滚动模块的id，如果有多个，可以使用["sidebar-follow","sidebar-sticky"]

stop_id，比如演示中我就定义底部大图模块的id为bottom，stop_id里面配置bottom，当模块滚动时遇到stop_id就会停止滚动，防止覆盖重叠。

4、引入 q2w3-fixed-widget.min.js

这样，一个简单的侧边栏跟随滚动就设置好了，想要这个效果的就可以改起来了。