前端实现吸顶效果

写页面经常会遇到这种需求：导航菜单初始位置不在头部，滑动页面时候当导航菜单滑到头部位置就固定在头部，往下滑导航菜单又回到初始位置。

网页被卷起来的高度/宽度（即浏览器滚动条滚动后隐藏的页面内容高度）

(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(&＃39;#searchBar&＃39;).offsetTop;if (scrollTop > offsetTop) {document.querySelector(&＃39;#searchBar&＃39;).style.position="fixed";document.querySelector(&＃39;#searchBar&＃39;).style.top="0";} else {document.querySelector(&＃39;#searchBar&＃39;).style.position="";document.querySelector(&＃39;#searchBar&＃39;).style.top="";}
})


2、css实现吸顶

position: sticky;
top:0