用position sticky来实现菜单吸顶效果

前言

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

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

简介

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

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

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

position: sticky;
top: 0;

兼容性

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

需要注意

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

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

另外有网友反馈说在Chrome浏览器下，在滚动到顶部时，元素会抖动一下。