威言威语
我愿像茶,苦涩留心,清香予人。
威言威语
当前位置: 首页 > 设计 > 正文

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

在我们搭建网站的时候,有时候页面主内容比较长,导致侧边栏显示空白,这个时候,一个智能且流畅的固定侧边栏能够提升用户体验,使用户在浏览长页面时始终保持关键信息的可见性。当用户滚动页面时,侧边栏可以固定在屏幕的一侧,显示如导航菜单、目录、广告或者相关文章等重要信息,同时可以获得更高的点击率。
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
}];

其中特别注意 widgetsstop_id

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

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

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

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

您可能还会对这些文章感兴趣!

jQuery侧边栏固定跟随滚动的实现方法:目前有 3 条评论

  1. 阿哲
    板凳
    阿哲:Google Chrome 84.0.4147.125 Windows 10

    :cool: 这种支持滚到底部时不会一直往下,能够停止不重叠,挺好的。

    2020-08-19 20:18 回复
    • William
      William猎豹浏览器 5.23.1 Redmi Note 9

      @阿哲是的,网上很多这类代码,虽然实现了跟随滚动,但是滚动底部之后的一些判断没有做好,有些就没有做。

      2020-08-19 23:18 回复
  2. 小码哥
    沙发
    小码哥:Safari 13.1.1 Mac OS X  10.15.5

    不错,学习了,我来研究一下。

    2020-06-10 16:10 回复

发表评论

电子邮件地址不会被公开。 必填项已用 * 标注

gravatar

question razz sad smile redface biggrin eek shock confused cool lol mad rolleyes wink cry