前端实现吸顶效果
1、监听scroll事件，实现吸顶功能
2、css实现吸顶
写页面经常会遇到这种需求：导航菜单初始位置不在头部，滑动页面时候当导航菜单滑到头部位置就固定在头部，往下滑导航菜单又回到初始位置。
网页被卷起来的高度/宽度（即浏览器滚动条滚动后隐藏的页面内容高度）
(javascript) document.documentelement.scrolltop //firefox(javascript) document.documentelement.scrollleft //firefox(javascript) document.body.scrolltop //ie(javascript) document.body.scrollleft //ie(jqurey) $(window).scrolltop() (jqurey) $(window).scrollleft()
网页工作区域的高度和宽度
(javascript) document.documentelement.clientheight// ie firefox (jqurey) $(window).height()
元素距离文档顶端和左边的偏移值
(javascript) dom元素对象.offsettop //ie firefox(javascript) dom元素对象.offsetleft //ie firefox(jqurey) jq对象.offset().top(jqurey) jq对象.offset().left
获取页面元素距离浏览器工作区顶端的距离
页面元素距离浏览器工作区顶端的距离 = 元素距离文档顶端偏移值 - 网页被卷起来的高度
即：
页面元素距离浏览器工作区顶端的距离 = dom元素对象.offsettop - document.documentelement.scrolltop
1、监听scroll事件，实现吸顶功能
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实现吸顶
position: sticky;top:0
感谢大家的阅读，希望大家收益多多
本文转自：https://blog.csdn.net/zqyzqy22/article/details/90634702
推荐教程：《js教程》
以上就是手把手教你如何实现前端的吸顶效果的详细内容。