滚动悬浮固定功能非常实用,特别是网站导航栏,以及文章目录等,用户体验超级棒。
查看演示 下载源码
网上有很多方法可以实现,不过大部分比较复杂(当然可配置的功能也很多),而且同时包含了 js+css 文件。但是,我们的需求往往很简单,希望尽量轻量。比较了数个方法后,觉得SF上的一个方法非常好,经过一番修改,更加灵活、好用了。原文网址放在文章最后。主要分为两部分代码,HTML 和 JS 部分。
<div>如果滚动固定方块与页顶距离 fixTop 小于页顶与浏览器顶部距离 docTop 时,开始悬浮固定。即 fix 的 position 为 fixed,而且固定块的 top 为 0,即保持固定在浏览器顶端。如下图。
悬浮过程中,如果到达结束块,而且结束块与页顶距离 endTop 小于 docTop+fixHeight,那么固定块的 top 就是他们之间的差,这个差是一个负值,所以悬浮块多余部分会向上超出浏览器,那部分看不到。如果继续滑动鼠标,固定块就会慢慢退出浏览器。如下。
了解了它的工作原理,就很容易把这部分代码嵌入到其他功能之中,实现更加复杂的应用。
参考资料: