吸顶和吸底

前端实现吸顶效果

–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// 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