原生javascript实现导航栏吸顶

导航栏的吸顶效果非常简单，可以说没有技术难度可言，但是既然遇到了，还是选择记录下来，可能会帮到部分小白。（demo链链接在最后面）

实现原理非常简单：

1.编写一个吸顶的css样式

2.div结构

3.封装一个获取滚动条位置的函数；

4.用window.onscroll =function(){}实时监听滚动条。

5.通过滚动条的位置判断，当大于某个指定值的时候（这里设置为50），改变导航栏的样式，实现吸顶效果。

6.结果对比

没吸顶之前

吸顶之后的效果

7.demo

https://github.com/webbms/-javascript-