电梯导航

 * {
        margin: 0;
        padding: 0;
      }

      body {
        height: 3000px;
      }

      .aside {
        position: fixed;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
      }

      .item {
        height: 40px;
        line-height: 40px;
        text-align: center;
        padding: 0 10px;
        cursor: pointer;
      }

      .active {
        background-color: red;
        color: #fff;
      }

      .content {
        width: 660px;
        margin: 400px auto;
      }

      .neirong {
        height: 300px;
        margin-bottom: 20px;
        color: #fff;
      }

      .content1 {
        background-color: red;
      }

      .content2 {
        background-color: blue;
      }

      .content3 {
        background-color: orange;
      }

      .content4 {
        background-color: yellowgreen;
      }

 <div class="aside">
      <div class="item active">男装/女装</div>
      <div class="item">儿童服装/游乐园</div>
      <div class="item">电子产品</div>
      <div class="item">电影/美食</div>
    </div>

    <div class="content">
      <div class="neirong content1">男装/女装</div>
      <div class="neirong content2">儿童服装/游乐园</div>
      <div class="neirong content3">电子产品</div>
      <div class="neirong content4">电影/美食</div>
    </div>

**需求分析 1.点击左边侧边栏 ： (1)自身排他修改样式
(2)网页滚动到右边对应盒子的位置 网页滚动 ： document.documentElemnt.scrollTop 对应盒子 : 下标一致 盒子位置 : offsetTop **

//1.获取元素
 let itemList = document.querySelectorAll('.item')
 let neirongList = document.querySelectorAll('.neirong')
 //注册事件
 for(let i = 0;i<itemList.length;i++){
     itemList[i].onclick = function(){

          //3.1 排他思想修改自身样式  类 active
          //(1)先找出active类移除
          document.querySelector('.item.active').classList.remove('active')
          //(2)给自己添加 this
          this.classList.add('active')
                                                           
          //3.2 网页滚动到对应盒子的位置   
          // console.log( neirongList[i].offsetTop )
    document.documentElement.scrollTop = neirongList[i].offsetTop 
    }
  }
      /* 网页滚动条事件
        获取当前网页滚动距离scrollTop  依次比较 右边四个盒子的offsetTop， 只要找到第一个比页面滚动距离大的盒子即可
      */
     window.onscroll = function(){
       //循环遍历右侧四个盒子的offsetTop
       for(let i = 0;i<neirongList.length;i++){
        if( neirongList[i].offsetTop >= document.documentElement.scrollTop ){
          //先去掉上一次选中的左侧列表
          document.querySelector('.item.active').classList.remove('active')
          //让左侧i下标列表排他
          itemList[i].classList.add('active')
          break
        }
       }
     }