【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'           }         })       })