当前第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教程》
以上就是手把手教你如何实现前端的吸顶效果的详细内容，更多文章请关注木庄网络博客！
返回前面的内容
相关阅读 >>
json解析是什么？
js如何实现简单的表格增删效果
js如何实现随机生成div的效果
网页设计是要学 php 还是 java
javascript如何替换字符串
js数组常见操作方法介绍
js如何修改css样式
js 怎么判断数字相等
js简单上传图片预览功能的实例详解
如何利用js拼接html字符串
更多相关阅读请进入《js》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者
转载请注明出处：木庄网络博客 » 手把手教你如何实现前端的吸顶效果
