html 实现吸顶效果图,如何实现前端的吸顶效果

如何实现前端的吸顶效果

发布时间：2020-07-29 09:21:30

来源：亿速云

阅读：121

作者：Leah

这篇文章将为大家详细讲解有关如何实现前端的吸顶效果，文章内容质量较高，因此小编分享给大家做个参考，希望大家阅读完这篇文章后对相关知识有一定的了解。

前端实现吸顶效果

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

关于如何实现前端的吸顶效果就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。