这篇文章给大家分享的是有关原生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
效果图:
代码如下:
无标题文档 以上
以上
以上
以上
以上
以上
以上
感谢各位的阅读!关于“原生js如何实现吸顶效果”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!