手把手教你如何实现前端的吸顶效果

前端实现吸顶效果1、监听scroll事件,实现吸顶功能2、css实现吸顶写页面经常会遇到这种需求:导航菜单初始位置不在头部,滑动页

前端实现吸顶效果

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

感谢大家的阅读,希望大家收益多多

以上就是手把手教你如何实现前端的吸顶效果的详细内容,更多请关注网站的其它相关文章!

WordPress主题下载,WordPress免费主题下载,网站源码模板下载


下载说明:
1. 本站所有资源来源于网络和用户上传,如有侵权请联系站长
2. 本站分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,商用请支持正版!不得违反国家法律,否则后果自负!
6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!

本站的资源均来自于互联网,仅为资源共享、学习参考之目的,其版权均归原作者及其网站所有,如有侵权请留言联系:admin,转转请注明出处:http://zhanmr.com/6931.htm

发表评论

电子邮件地址不会被公开。 必填项已用*标注