京东导航栏和电梯导航案例

京东顶部案例

<script>
    //添加入口
    window.addEventListener('load', function () {
      // 获取元素
      let header = document.querySelector('.header')
      let sk = document.querySelector('.sk')
      // 添加滚动事件
      window.addEventListener('scroll', function () {
        // 获取模块离文档顶部的距离
        let skOffsetTop = sk.offsetTop
        // 文档滚动离顶部的距离
        let offset = document.documentElement.scrollTop
        // 判断
        if (offset > skOffsetTop) {
          header.style.top = 0
        } else {
          header.style.top = '-80px'
        }
      })

    })
  </script>
  

电梯导航案例

<script>
      window.addEventListener('load', function() {
        let items = document.querySelectorAll('.item')
        let neirongs = document.querySelectorAll('.neirong')

        // 为左侧导航项绑定事件--伪数组需要遍历
        items.forEach(function(ele, index) {
          ele.addEventListener('click', function() {
            document.querySelector('.item.active').classList.remove('active')
            ele.classList.add('active')

            // 获取与这个导航项对应的内容面板
            let current = neirongs[index]
            // 让页面滚动当前对应的内容面板离顶部的距离
            document.documentElement.scrollTop = current.offsetTop
          })
        })
      })
    </script>