实现滚动条电梯效果-Toy模板网

这篇具有很好参考价值的文章主要介绍了实现滚动条电梯效果。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

今天又学到了新知识，接下来来分享一下这个案例是如何做的

素材来自于黑马教程我把网址发在这里大家可以自行下载，里面包含素材，和图片等!

百度网盘请输入提取码

首先还是咱们HTML部分，因为代码过多，想了解具体情况可以去看看教程，我们来挑一个来讲就行，data-name="new"这是意思是自定义标签，

这段代码是一个HTML标签，表示自定义导航的标签。其中，data-name="new"是一种HTML5中的自定义属性，用于在HTML元素上存储额外的信息。它可以用JavaScript来访问和操作。在自定义导航时，您可以使用这个属性来表示不同的导航标签名称，以便在后续操作中更方便地识别和处理。

然后我们需要一个公共样式command的样式表来设置公共样式，在设置一个我们自己的index样式，这里已经给我弄好了，就直接讲js部分，源码我会放在下面

我们先需要设置一个自执行的函数，来防止我们变量的污染，下面我们来获取两个元素，然后还是给我们窗口也就是Windows来加一个滚动事件

scrool是滚动条意思，这里是添加一个滚动事件，这里是做了一个判断，

document.documentElement.scrollTop是滚动到相应的位置,这里判断的依据就是，如果我这个n的值大于三百那么我们就显示，否则隐藏

最后这个操作做完之后我们需要做一个返回到顶部操作，还是先获取我们最后一个值，然后添加点击事件之后，然这个滚动条滚动到顶部，这里等于0就是滚动顶部的意思

然后进行我们第二个操作，还是定义一个自执行函数，然后我们来获取这个滚动条，来进行排他思想，这里也是进行一个判断，如果原来的active有这个对象，就移除，反之就不删除这个对象，然后这一个模块最后一个地方，我们需要获取到对应的大盒子，所以我们先来获取我们的自定义函数，然后根据小盒子来选大盒子，使用模板字符串来获取这些li的字符串，最后让我们来对应到相应的盒子位置

也就是

document.documentElement.scrollTop=top

最后我们这个模块是让我们划到那个模块，哪个地方就自己亮色

还是需要获取我们四个小li的元素，因为我们HTML写了自定义函数，我们直接获取即可

然后还是来让我们的n来判断如果我们滚到了下一个模块的话，下一个地方就会自动高亮，这里也是使用双elseif来写，最后一个用else就限制死了，如果我们还需要加一个模块，那么就需要继续判断，反正最后也就是傻瓜式判断，很好理解！

<script>
  (function(){
    //获取元素
  const elevator=document.querySelector('.xtx-elevator')
  const entry=document.querySelector('.xtx_entry')
  //1.当页面滚动大于300像素 就显示电梯导航
  //2.给页面加滚动事件
  window.addEventListener('scroll',function(){
    const n=document.documentElement.scrollTop
    //被卷去头部大于三百
    elevator.style.opacity=n>=entry.offsetTop ? 1:0
  })
  //返回到顶部
  const backTop=document.querySelector('#backTop')
  backTop.addEventListener('click',function(){
    document.documentElement.scrollTop=0
  })
  })();
//2.点击页面可以滑动
  (function(){
   const list=document.querySelector('.xtx-elevator-list')
   list.addEventListener('click',function(e){
    //排他思想
    //先移除其他的类
    //先获取这个类名
    //判断，如果原来有active类的对象，就移除类，如果开始没有对象，就不删除，所以不报错。
    if(e.target.tagName ==='A'&& e.target.dataset.name){
      const old=document.querySelector('.xtx-elevator .active')
      //判断
      if(old)old.classList.remove('active')
        //添加这个元素
        e.target.classList.add('active')
        //获取自定义属性new topic
        //console.log(e.target.dataset.name)
        //根据我们的小盒子来选定大盒子
        //获取对应的大盒子
        const top=document.querySelector(`.xtx_goods_${e.target.dataset.name}`).offsetTop
        //让页面对应到相应的位置
        document.documentElement.scrollTop=top
    }
   })
//3.页面滚动，可以根据大盒子选小盒子加active类
window.addEventListener('scroll',function(){
  const old=document.querySelector('.xtx-elevator .active')
      //判断
    if(old)old.classList.remove('active')
    //获取四个大盒子
    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>

由于代码里及其繁多！！，毕竟也是我之前自学学的第一个布局案例，所以我特意告诉大家素材位置就在jsAPI里面第三天的素材里面有个电梯的素材，直接文件夹下载即可！

喜欢的话就记得三连噢！！！，谢谢大家文章来源地址https://www.toymoban.com/news/detail-474268.html

到了这里，关于实现滚动条电梯效果的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！