前端實作吸頂效果
#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教學》
以上是手把手教你如何達到前端的吸頂效果的詳細內容。更多資訊請關注PHP中文網其他相關文章！
