两行代码搞定导航吸顶（position:sticky）

我们在开发页面时 最常见的功能之一 就是导航吸顶 或 tab 吸顶，这两天用react和vue写这个功能时 遇到了个坑
当页面只有一个滚动条时 还好，不会出现什么大坑，可以用原生滚动条监听事件处理，但是用原生的话 就还需要考虑上事件卸载问题，我们使用SPA模式开发，内部页面都是组件，若是不卸载的话 后患无穷。 react中也有合成事件 onScroll 但是不知为何 我这个事件注册后始终无法监听到滚动条位置， 希望有大佬能帮忙解决 。。。
当页面 不止一个滚动条出现时，坑就深了
页面滚动时 我们的导航已经 定位到顶部，但是到下面 还有两个滚动条 一旦滚动条滚动 ，就会触发导航的事件，造成页面混乱。。。。
经过多番考虑，突然发现了救星，那就是position ：sticy
css后新增了一个粘性定位：这使 的原本需要js 至少十行的代码功能 可用 css两行实现 （开心到起飞）
下面了解下 这个属性

初识 position:sticky sticky

英文字面意思是粘，粘贴，所以姑且称之为粘性定位。下面就来了解下这个处于实验性的取值的具体功能及实用场景。

这是一个结合了 position:relative 和 position:fixed 两种定位功能于一体的特殊定位，适用于一些特殊场景。

什么是结合两种定位功能于一体呢？

元素先按照普通文档流定位，然后相对于该元素在流中的 flow root（BFC）和 containing
block（最近的块级祖先元素）定位。

而后，元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。

这个特定阈值指的是 top, right, bottom 或 left 之一，换言之，指定 top, right, bottom 或
left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同

但是他的兼容性不容乐观