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