页面顶部距离：电梯、跳转、滚动高亮

电梯导航栏出现与消失

思路：

1. 获取元素，添加滚动事件
2. 设置滚动事件：在距离页面顶部n距离后显示出电梯导航栏

<script>
  // 电梯栏的显示和隐藏
  (function(){
  // 获取元素
  const elevator = document.querySelector('.xtx-elevator')
  // 给页面添加滚动事件
  window.addEventListener('scroll', function(){
    // 电梯的出现与消失
//if语句
    const n = document.documentElement.scrollTop  //获取顶部距离
    if (n >= 300){   // 当页面滚动 >300px 就显示电梯导航
      elevator.style.opacity = 1  //电梯出现
    } else {
      elevator.style.opacity = 0  //电梯消失
    }
//三目运算
    elevator.style.opacity = n >= 300 ? 1 : 0
  })
</script>

点击导航页面位置跳转

一、点击回到页面顶部

思路：

1. 获取对应li，添加点击事件
2. 设置点击事件：回到顶部（距离页面0px处）

<script>
// 点击返回页面顶部
const backTop = document.querySelector('#backTop')  //获取对应li
backTop.addEventListener('click', function() {   //添加点击事件
  document.documentElement.scrollTop = 0
  //↑属性赋值  ↓方法赋值
  window.scrollTo(0 , 0)  //优点：可以设置两个值
})
})();
</script>

二、点击跳转位置

思路：

（前提：在html中，将对应的盒子属性名一一对应）

1. 获取电梯导航的对应盒子
2. 判断盒子（使用事件对象e）：
   1. 点击的为含a链接（注：tagName取出的标签名为大写'A'）
   2. 并带有自定义属性的div标签
3. 排他思想（先移除再添加）：获取 active类名的对象
   1. 判断是否存在 active
      1. 若存在，则删除 active类名的对象
      2. 若不存在，则返回null（第二次点击后添加 active）
4. 将事件对象e获取到的，active类对应的属性名的盒子，的顶部距离，传给top
5. 将top值传递给scrollTop

<script>
// 点击跳转页面位置
(function(){
  // 点击页面有滑动效果
  const list = document.querySelector('.xtx-elevator-list')
  list.addEventListener('click', function(e){
    //判断条件
    //点击的是A 并且含有自定义属性(默认为真)
    if(e.target.tagName === 'A' && e.target.dataset.name) {
      //排他思想  先移除再添加 （给当前事件添加或移除类）
      // 先获取 active 类名的对象
      const old = document.querySelector('.xtx-elevator-list .active')
      console.log(old)  //返回 null
      //判断是否存在 active
      //存在则移除类
      if(old){
        old.classList.remove('active') //不存在active 则返回 null  第二次点击添加 active
        }
      e.target.classList.add('active')
      // 点击小 li ，页面跳转到对应大盒子位置
      // 核心思想：把对应大盒子的offsetTop 给 scrollTop
      // 将小盒子自定义属性名传给大盒子，并自动跳转
      console.log(e.target.dataset) //获取盒子的名字
      const top = document.querySelector(`.xtx_goods_${e.target.dataset.name}`).offsetTop  //拿到对应的div盒子
      //让页面滚动到对应盒子的位置
      document.documentElement.scrollTop = top
      // 最后一个 a 不监听
      // 首先：点击的是 A  其次：点击的A有自定义属性 
    }
  })
})();
</script>

电梯区随页面位置改变

思路：

1. 设置页面滚动后，移除 a中 active类 （防止多个类）（随时移除随时添加）
2. 先获取active 并判断（同上）
3. 获取所有的大盒子，并获取其到顶部的距离
4. 做 if 语句的判断，添加对应区块导航栏的高光

<script>
//页面滚动后，移除所有li中 a 的 active类（防止有多个active）
  window.addEventListener('scroll', function(){
  // 先获取 active 类名的对象
  const old = document.querySelector('.xtx-elevator-list .active')
  //判断是否存在 active, 存在则移除类
  if(old){old.classList.remove('active')} //不存在active 则返回 null  第二次点击添加 active
  //判断页面当前滑动的位置，选择小盒子
  //获取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 {
    //选择第四个小盒子
    document.querySelector('[data-name=topic]').classList.add('active')
  }
})
</script>