减少每天的含妈量，导航栏跟随内容滚动高亮？

本次实现导航栏（跟随滚动高亮导航项、切换导航项跳转指定位置）功能...

目录跟随内容滚动高亮

实现过程： 监听滚动元素scroll事件，获取目录标题元素在可视区的当前位置小于等于滚动距离给对应的目录项添加nav-item__active类名。

    // 添加滚动事件，监听滚动距离 scrollTop
  document.getElementsByClassName('reportBody')[0].addEventListener('scroll', (e) => scrollCallback(e))


  // 滚动回调函数
  const scrollCallback = (e) => {
    requestAnimationFrame(() => {
      // 滚动的距离
      let scrollTop = e.target.scrollTop
      
      // navIdHdom存放所有目录元素的id，通过id获取指定目录
      // navItem存放所有目录元素
      for (let i = 0; i < navIdHdom.length; i++) {
        let dom = document.querySelector(navIdHdom[i])
          //核心
        if (dom.offsetTop <= scrollTop + 100) {
          //排他
          for (let j = 0; j < navItem.length; j++) {
            navItem[j].classList.remove('nav-item__active')
          }
          //高亮
          navItem[i].classList.add('nav-item__active')
          continue;
        }
      }
    })
  }

切换目录可视区展示指定内容

实现过程： 为目录项绑定点击事件，内容区对应id的标题元素调用scrollIntoView跳转可视区头部。

     // 根据a标签属性获取所有元素
  let navAllDom = document.querySelectorAll('a[href^="#"]')
  let navIdHdom = [] //存放所有h标题的id值
  navAllDom.forEach(a => {
  // 这一步可以忽略，用来方便（目录跟随滚动高亮）部分的实现
    navIdHdom.push(a.getAttribute('href'))
    a.addEventListener('click', function (e) {
    // 阻止默认行为
      e.preventDefault();
      // 获取指定id的可视区元素并调用scrollInfoView跳转到指定内容区域
      document.querySelector(e.target.hash).scrollIntoView({
        behavior: 'smooth'
      })
    })
  })
  

完结撒花，一个极其简单的小功能。 用习惯了框架，在使用原生写东西含妈量真的飙升啊，欢迎小伙伴们一同交流，告别含妈量极高的一天。