如何实现前端的吸顶效果

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

<强>前端实现吸顶效果

<强> 1,监听滚动事件,实现吸顶功能

<强> 2,css实现吸顶

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

<强>网页被卷起来的高度/宽度(即浏览器滚动条滚动后隐藏的页面内容高度)

document.documentElement (javascript)。scrollTop//火狐 　　 　　document.documentElement (javascript)。scrollLeft//火狐 　　 　　document.body (javascript)。scrollTop//IE 　　 　　document.body (javascript)。scrollLeft//IE 　　 　　(jqurey)美元(窗口).scrollTop () 　　 　　(jqurey)美元(窗口).scrollLeft ()

<强>网页工作区域的高度和宽度

document.documentElement (javascript)。clientHeight//IE firefox 　　 　　(jqurey)美元(窗口).height ()

<强>元素距离文档顶端和左边的偏移值

(javascript DOM)元素对象。offsetTop//IE firefox 　　 　　()javascript DOM元素对象。offsetLeft//IE firefox 　　 　　(jqurey)金桥对象.offset直()上 　　 　　(jqurey)金桥对象.offset ()。左

<强>获取页面元素距离浏览器工作区顶端的距离

页面元素距离浏览器工作区顶端的距离,=,元素距离文档顶端偏移值,,,网页被卷起来的高度

即:

页面元素距离浏览器工作区顶端的距离=,DOM元素对象。offsetTop,——document.documentElement。scrollTop

<强> 1,监听滚动事件,实现吸顶功能

window.addEventListener (“scroll"()=祝辞{ 　　让scrollTop=document.documentElement。scrollTop | | document.body.scrollTop; 　　让offsetTop=document.querySelector (& # 39; # searchBar& # 39;) .offsetTop; 　　如果(scrollTop比;offsetTop) { 　　document.querySelector (& # 39; # searchBar& # 39;) .style.position=癴ixed"; 　　document.querySelector (& # 39; # searchBar& # 39;) .style.top=?”; 　　其他}{ 　　document.querySelector (& # 39; # searchBar& # 39;) .style.position=?”; 　　document.querySelector (& # 39; # searchBar& # 39;) .style.top=?”; 　　}})

<强> 2,css实现吸顶

位置:粘性; 　　上图:0

如何实现前端的吸顶效果