手把手教你如何实现前端的吸顶效果
前端实现吸顶效果
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 |
感谢大家的阅读，希望大家收益多多
以上就是手把手教你如何实现前端的吸顶效果的详细内容，更多请关注网站的其它相关文章！
