API-综合案例-电梯导航

学习目标：

• 掌握综合案例-电梯导航

---

学习内容：

1. 综合案例-电梯导航

---

综合案例-电梯导航：

 <script>
    //第一大模块，页面滑动可以显示和隐藏
    (function () {
      //获取元素
      const entry = document.querySelector('.xtx_entry')
      const elevator = document.querySelector('.xtx-elevator')
      //1.当页面滚动大于300像素，就显示电梯导航
      //2.给页面添加滚动事件
      window.addEventListener('scroll', function () {
        //被卷去的头部大于300
        const n = document.documentElement.scrollTop
        // if (n >= 300) {
        //   elevator.style.opacity = 1
        // } else {
        //   elevator.style.opacity = 0
        // }
        //简写
        // elevator.style.opacity = n >= 300 ? 1 : 0
        elevator.style.opacity = n >= entry.offsetTop ? 1 : 0
      })

      //点击返回页面顶部
      const backTop = document.querySelector('#backTop')
      backTop.addEventListener('click', function () {
        //可读写
        // document.documentElement.scrollTop = 0
        // window.scrollTo(x,y)
        window.scrollTo(0, 0)
      })

    })();

    //第二第三都放到另外一个执行函数里面
    (function () {
      //2.点击页面可以滑动
      const list = document.querySelector('.xtx-elevator-list')
      list.addEventListener('click', function (e) {
        // console.log(11)
        if (e.target.tagName === 'A' && e.target.dataset.name) {
          //排他思想
          //先移除原来的类active
          //先获取这个active的对象
          const old = document.querySelector('.xtx-elevator-list .active')
          //判断  如果原来有active类的对象，就移除类，如果开始就没有对象，就不删除，所以不报错
          if (old) old.classList.remove('active')
          //当前元素添加active
          e.target.classList.add('active')
          //获得自定义属性  new topic
          // console.log(e.target.dataset.name)
          //根据小盒子的自定义属性值 去选择 对应的大盒子
          // console.log(document.querySelector(`.xtx_goods_${e.target.dataset.name}`).offsetTop)
          //获得对应大盒子的 offsetTop
          const top = document.querySelector(`.xtx_goods_${e.target.dataset.name}`).offsetTop
          //让页面滚动到对应的位置
          document.documentElement.scrollTop = top

        }
      })


      //3.页面滚动，可以根据大盒子选小盒子  添加active类
      window.addEventListener('scroll', function () {
        //3.1 先移除类
        //先获取这个active的对象
        const old = document.querySelector('.xtx-elevator-list .active')
        //判断  如果原来有active类的对象，就移除类，如果开始就没有对象，就不删除，所以不报错
        if (old) old.classList.remove('active')
        //3.2判断页面当前滑动的位置，选择小盒子
        //获取4个大盒子
        const news = document.querySelector('.xtx_goods_new')
        const popular = document.querySelector('.xtx_goods_popular')
        const brand = document.querySelector('.xtx_goods_brand')
        const topic = document.querySelector('.xtx_goods_topic')
        const n = document.documentElement.scrollTop
        if (n >= news.offsetTop && n < popular.offsetTop) {
          //选择第一个小盒子
          document.querySelector('[data-name=new]').classList.add('active')
        } else if (n >= popular.offsetTop && n < brand.offsetTop) {
          //选择第二个小盒子
          document.querySelector('[data-name=popular]').classList.add('active')
        } else if (n >= brand.offsetTop && n < topic.offsetTop) {
          //选择第三个小盒子
          document.querySelector('[data-name=brand]').classList.add('active')
        } else if (n >= topic.offsetTop) {
          //选择第四个小盒子
          document.querySelector('[data-name=topic]').classList.add('active')
        }

      })


    })();

  </script>