前言

我之前都是使用固定定位来实现吸顶效果,做个普通的顶部菜单吸顶功能还凑活,但是碰到复杂的场景就歇菜了。

恰逢今天项目上需要做个非常规的吸顶效果,用固定定位怎么调都不达不到最好效果。最后还是得请教一下万能的搜索引擎,然后就发现了本文接下来要介绍的position:sticky

简介

单词sticky的中文意思是“粘性的”,position:sticky表现也符合这个粘性的表现。

基本上可以看成是position:relativeposition:fixed的结合体。当元素在屏幕内,表现为relative,就要滚出显示器屏幕的时候,表现为fixed。

使用position:sticky时需要指定top, right, bottom 或 left 四个阈值其中之一,才可使粘性定位生效。否则其行为与相对定位相同。

position: sticky;
top: 0;

需要注意

父级元素不能有任何overflow:visible以外的overflow设置,否则没有粘滞效果。因为改变了滚动容器(即使没有出现滚动条)。因此,如果你的position:sticky无效,看看是不是某一个祖先元素设置了overflow:hidden,移除之即可。

父级元素设置和粘性定位元素等高的固定的height高度值,或者高度计算值和粘性定位元素高度一样,也没有粘滞效果。

另外有网友反馈说在Chrome浏览器下,在滚动到顶部时,元素会抖动一下。这个我暂时没有注意到,后面碰到了再更新一下。

兼容性

在查阅了caniuse之后,发现除了IE和少数冷门的移动端浏览器,其他主流浏览器基本都能兼容,如果对IE没啥适配要求的朋友可以安心上车。

相关资料

张鑫旭的博客

https://www.zhangxinxu.com/wordpress/2015/05/css3-transform-affect/