admin管理员组

文章数量:1122957

【JavaScript】

 黄色箭头指向  滚动条

黑色箭头指向   导航栏

没有滚动 之前  导航栏没有固定在顶部

任务是：随着滚动条滚动到一定位置  导航栏固定 顶部  dispaly：fixed

以下代码的 display 样式 已经配置，只需要添加一个类名就行  .fixed

 window.addEventListener('load', function() {// 获取元素navBar，后期需要获取它离页面顶部的距离，同时满足条件之后还要为其设置fixed样式let navBar = document.querySelector('#navBar')// 获取导航条的高度，因为后期内容面板的margin-top需要以这个值做为参照let navBarH = navBar.offsetHeight// mainPart：内容，后期需要为内容添加样式let mainPart = document.querySelector('#mainPart')// 获取navBar离页面顶部的距离let navBarTop = navBar.offsetTop// 添加页面滚动的监听：因为我们要获取当前页面垂直方向卷出屏幕的距离，用这个距离和之前获取的导航条离顶部的距离进行比较，如果大于等于应该添加fiexed样式window.addEventListener('scroll', function() {// 获取当前滚动出屏幕的距离let offset = document.documentElement.scrollTop// 判断卷出屏幕的距离是否大于导航条离顶部的距离if (offset >= navBarTop) {navBar.classList.add('fixed')// 为navBar添加定位样式之后，会造成元素脱标，从而导致内容往上移从而重叠，我们可以内容添加一个margin-top样式：样式的值就是导航条的高度mainPart.style.marginTop = navBarH + 10 + 'px'} else {navBar.classList.remove('fixed')// 如果没有定位样式，则将外边距还原mainPart.style.marginTop = 10 + 'px'}})})

本文标签： javascript

版权声明：本文标题：【JavaScript】 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/biancheng/1701545626a432249.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。