原生js实现吸顶效果

前端之家收集整理的这篇文章主要介绍了原生js实现吸顶效果前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

实现思路如下:

1. div初始居普通文档流中

2. 给window添加scroll事件(可事件节流),获取div的offset的top值,滚动时scrollTop值和top比较,当到达top时给div添加一个fixed的class使其固定

3. 向上滚动时当到达div初始top时则删除fixed的class,此时div又回到普通文档流中

4. fixed样式非IE6浏览器使用position:fixed,IE6使用position:absolute和IE expression

效果图:

代码如下:

<Meta charset="utf-8"> 无<a href="https://www.jb51.cc/tag/biaoti/" target="_blank" class="keywords">标题</a>文档