前端实现吸顶效果
写页面经常会遇到这种需求：导航菜单初始位置不在头部，滑动页面时候当导航菜单滑到头部位置就固定在头部，往下滑导航菜单又回到初始位置。
•网页被卷起来的高度/宽度（即浏览器滚动条滚动后隐藏的页面内容高度）
•(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// IEfirefox (jqurey)
$(window).height()
•元素距离文档顶端和左边的偏移值
•(javascript) DOM元素对象.offsetTop //IEfirefox (javascript) DOM元素对象.offsetLeft //IEfirefox (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; letoffsetTop = 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
相应的有时候就需要就有吸底效果
吸底
–1、监听scroll事件，实现吸底功能
• // 监听滚动条是否到达底部
• watchSchool() {
• //变量scrollTop是滚动条滚动时，距离顶部的距离
• var scrollTop =
• document.documentElement.scrollTop || document.body.scrollTop;
• //变量windowHeight是可视区的高度
• var windowHeight =
• document.documentElement.clientHeight || document.body.clientHeight;
• //变量scrollHeight是滚动条的总高度
• var scrollHeight =
• document.documentElement.scrollHeight || document.body.scrollHeight;
• //滚动条到底部的条件
• this.bottom = scrollTop + windowHeight == scrollHeight ? 43 : 0;
• }
• window.onscroll = () => {
• this.watchSchool();
• };
2、css实现吸顶
•position:sticky;
bottom:0
