固定导航条移动案例JS部分的步骤首先获取目标与顶部的距离然后获取需要变动的元素然后设置页面滚动监听然后给距离赋值

<!DOCTYPE html>
<html>

<head lang="en">
  <meta charset="UTF-8" />
  <title></title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    img {
      vertical-align: top;
      width: 100%;
    }

    .main {
      margin: 10px auto 0;
      width: 1000px;
    }

    .fixed {
      width: 100%;
      position: fixed;
      top: 0;
      left: 0;
    }
  </style>
</head>

<body>
  <div class="top" id="topPart">
    <img src="images/top.png" alt="" />
  </div>
  <div class="nav" id="navBar">
    <img src="images/nav.png" alt="" />
  </div>
  <div class="main" id="mainPart">
    <img src="images/main.png" alt="" />
  </div>
  <script>
    window.addEventListener('load', function () {
      //获取目标距离顶部的距离
      let topHeight = document.querySelector('.top').offsetHeight
      let navHeight = document.querySelector('.nav').offsetHeight
      //获取元素
      let nav = document.querySelector('.nav')
      let main = document.querySelector('main')
      //设置页面滚动监听
      window.addEventListener('scroll', function () {
        //赋值
        let scrollTop = document.documentElement.scrollTop
        //判断距离是否可以触发事件，可以的话就触发事件
        if (scrollTop > topHeight) {
          nav.classList.add('fixed')
          main.style.marginTop = navHeight + 10 + 'px'
        } else {
          nav.classList.remove('fixed')
          main.style.marginTop = 10 + 'px'
        }
      })
    })

  </script>
</body>

</html>

JS部分的步骤
首先获取目标与顶部的距离
然后获取需要变动的元素
然后设置页面滚动监听
然后给距离赋值投入使用
最后，用高度的值来判断是否触发滚动事件，可以触发就改变样式