何为吸顶?吸顶就是随着页面滚动,某个元素在移动到顶部后便会固定下来,并且不会再因为页面继续滚动而消失。
常见应用于页面的Tab栏。以下是自己在学习过程中简单整理的三种吸顶方式( 仅描述思路 )。
一、position: sticky
设置粘性定位并且添加某个方位才可生效,但是兼容性较差。
二、动态修改元素的position
监听页面的滚动,比较 元素初始状态距离顶部的高度offsetTop 与 页面此时的滚动高度 。当后者大于前者时,修改元素的position方式为fixed。
三、障眼法
跟第二种方法有相似的地方,而第二种方式更为常用与简便。
当第二种方法不起作用的时候可以选择第三种方法,比如在 better-scroll 框架内实现吸顶效果,固定定位会出现定位不准确的问题。
具体操作:
- 复制一个相同的元素,将其固定于顶部并让其先隐藏。
- 监听页面的滚动,比较 元素初始状态距离顶部的高度offsetTop 与 页面此时的滚动高度 ,当后者数值大于前者数值时,原来的元素刚刚好触顶,且正与新元素的位置重合。
- 此时我们在监听方法中,让这个新元素显示。
- 当页面继续滚动的时候,原来的元素已经被滚上去了,而新的元素一直被固定在顶部并且此时已经显示出来,所以这个过程发生的时候,会让人有一种元素改变了定位方式的错觉。