重庆分公司,新征程启航
为企业提供网站建设、域名注册、服务器等服务
这篇文章将为大家详细讲解有关如何实现前端的吸顶效果,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。
平邑网站制作公司哪家好,找成都创新互联公司!从网页设计、网站建设、微信开发、APP开发、响应式网站建设等网站项目制作,到程序开发,运营维护。成都创新互联公司从2013年创立到现在10年的时间,我们拥有了丰富的建站经验和运维经验,来保证我们的工作的顺利进行。专注于网站建设就选成都创新互联公司。
前端实现吸顶效果
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
关于如何实现前端的吸顶效果就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。