当前第2页 返回上一页
页面元素距离浏览器工作区顶端的距离 = 元素距离文档顶端偏移值 - 网页被卷起来的高度
即：
页面元素距离浏览器工作区顶端的距离 = DOM元素对象.offsetTop - document.documentElement.scrollTop
1、监听scroll事件，实现吸顶功能
1 2 3 4 5 6 7 8 9 10 | window.addEventListener("scroll",()=>{
let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
let offsetTop = document.querySelector('#searchBar').offsetTop;
if (scrollTop > offsetTop) {
document.querySelector('#searchBar').style.position="fixed";
document.querySelector('#searchBar').style.top="0";
} else {
document.querySelector('#searchBar').style.position="";
document.querySelector('#searchBar').style.top="";
}})
|
2、css实现吸顶
感谢大家的阅读，希望大家收益多多
本文转自：https://blog.csdn.net/zqyzqy22/article/details/90634702
推荐教程：《JS教程》
以上就是手把手教你如何实现前端的吸顶效果的详细内容，更多文章请关注木庄网络博客！
返回前面的内容
相关阅读 >>
带你轻松理解kmp算法
学js需要什么基础？
js如何将json字符串转换为json对象
如何利用js实现水平移动与垂直移动效果
前端js怎么学
如何判断网页中图片加载成功或者失败？
javascript和js之间有区别吗
vue 的 render 方法中 h 是什么？
使用javascript的模块加载器
前端用nodejs能做什么
更多相关阅读请进入《js》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者
转载请注明出处：木庄网络博客 » 手把手教你如何实现前端的吸顶效果
