在页面中添加滚动一定距离后跟随滚动模块的方法和注意事项

现在在网页中,经常可以看到一些滚动跟随模块。比较常见的两种场景:

  1. 页面滚动到了导航条位置,然后导航条就固定到页面顶端,跟随滚动
  2. 边栏高度不如正文高,滚动到边栏末端,出现一个跟随页面的滚动的边栏模块
    本文就是来介绍如何实现这个效果,并且解决这个效果带来的一些问题。

实现的基本原理

固定到页面的某个位置,并且跟随页面滚动,实际上就是用到了一个 CSS 中的 position 属性值 fixed。对 HTML 对象指定 position 属性为 fixed 之后,这个对象就会保证位置不变,跟随页面滚动。但是这个属性在早期的 IE 浏览器中是不支持的,有很多 hack 方法,在这里不再赘述。

那么,要想实现 滚动一定距离 之后,某个模块跟随页面滚动,要做的就是用 Javascript 来监控页面的滚动事件,判断滚动距离是否达到目标位置,然后对要跟随滚动的模块修改 position 属性为 fixed。当然,也可以提前做好一个滚动跟随模块,用 display 属性隐藏起来,等滚动到了一定距离,取消显示。至于怎么出现和出现什么内容,就看你自己的需求了。用 jQuery 监控方法如下:

$(window).scroll(function(){
if ($(window).scrollTop()>64){
$(“#menu”).css({position:”fixed”,left:”0px”,top:”0px”});
}else{
$(“#menu”).css({position: “relative”});
}
});

这里,对 window 对象使用 jQuery 的 scroll 方法,用来监控滚动事件。当页面滚动的时候,就会触发定义的函数。函数的功能也比较简单,使用 scrollTop 方法来获取当前网页滚动的位置距离页面顶部多高(单位 px),然后用 if 语句判断,当滚动距离页面顶端超过 64px 之后,就对 id 为 menu 的模块修改 CSS 样式,让它跟随页面滚动。当小于这个高度的时候,再修改回去。

虽然功能比较简陋,但大体的原理就是这样,更多具体的效果,请自由发挥。

两个跟随滚动插件

神说,这么好的效果应该做成插件,于是就有了插件。这里简单的介绍两款基于 jQuery 的插件:Sidebar FollowScroll Follow

这是 mg12 写的一个小插件,代码比较少,功能也比较简单,所以使用起来就比较方便。看名字就可以知道,主要用于边栏模块的跟随滚动。代码页比较少,有兴趣的同学可以看一下。

Sidebar Follow官方主页和使用说明

Scroll Follow

这是个比较老功能比较强大的插件,可以实现各种你想要的跟随滚动效果。具体的下载地址和使用方法,也不再赘述了。

Scroll Follow官方主页和使用说明

添加跟随滚动模块的注意事项

本文介绍的技术其实没有什么技术含量,写本文的最主要的目的,是想介绍下面这两个注意事项。

尽量少的使用

再好的功能,也要适度使用。屏幕的空间本来就有限,加上一个很高的导航条,再加上左下角、右下角的广告,右边再来个边栏跟随,这样的页面你如何才能专注的看正文内容?所以要尽量多的留出浏览者阅读的空间,适度的补充内容,尽量保证页面的整洁。才能有一个比较好的用户体验。

设置合理的结构防止页面塌陷

这个问题才是本文的重点,网上很多采用这个效果的页面都中了这个问题。先来看看问题演示 demo

塌陷的具体问题效果很明显,就是下面的内容突然跑上去了,产生了回流(reflow)。回流简单的说,就是当你页面中某个部分突然消失了,浏览器就需要重新渲染网页的内容。潜行者M的 Demo 页面由于结构比较简单,所以具体效果只是内容突然上去而已。但是对于结构比较复杂、代码比较多的网站来说,一旦出现回流,浏览器就要重新计算渲染,页面就会卡一下子。如果浏览者的电脑配置比较低,甚至会卡一下电脑。如果浏览者的浏览器版本比较低,可能会导致页面错乱。

事关用户体验的问题,是不能容忍的。问题的原因,就是突然改变了相关结构的 CSS 属性导致。就本例而言,原来的导航条 position 属性是 relative ,在页面中占据一定空间。突然改成了 fixed 脱离了文档流,自然浏览器要把原来位置补上,重新渲染。

所以,在设计页面跟随滚动模块之前,一定要考虑到这个细节。最好设置比较好的 HTML 结构,撑起来。也可以在要滚动的模块外面包裹一层结构,用来占位。也可以在一开始,就让滚动模块脱离文档流。潜行者M的建议是,最好专门设置一个用来滚动的模块,先隐藏,然后触发显示。