在我们搭建网站的时候，有时候页面主内容比较长，导致侧边栏显示空白，这个时候，一个智能且流畅的固定侧边栏能够提升用户体验，使用户在浏览长页面时始终保持关键信息的可见性。
当用户滚动页面时，侧边栏可以固定在屏幕的一侧，显示如导航菜单、目录、广告或者相关文章等重要信息，同时可以获得更高的点击率。
网上这类代码或者插件还是比较多的，比如：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版本就合适一些。
VIEW DEMO在演示页面，右侧的模块“滕王阁”会随着页面的滚动，而固定在浏览器的右侧，当遇到底部的图片时，停止元素会将其向上推动，不会继续固定而覆盖底部的元素。
具体使用方法1、页面引入了jQuery
2、配置跟随滚动模块id
给需要跟随滚动的模块设置id，比如id= sidebar-follow
3、配置选项
var[{ "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
这样，一个简单的侧边栏跟随滚动就设置好了，想要这个效果的就可以改起来了。