当前第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教程》
以上就是手把手教你如何实现前端的吸顶效果的详细内容，更多文章请关注木庄网络博客！
返回前面的内容
相关阅读 >>
箭头函数的理解
javascript如何解除绑定事件
javascript是js吗
js proxy 的优势以及使用场景
js判断数组中是否包含某个值
解析js on及addeventlistener原理用法的区别
javascript如何设置值
js递归的用法详解
three.js使用gpu选取物体并计算交点位置
在js中写html代码怎么写
更多相关阅读请进入《js》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者
转载请注明出处：木庄网络博客 » 手把手教你如何实现前端的吸顶效果
