jQuery实现电梯导航模块

Z时代
2024-01-10
分类：IT

本文实例为大家分享了jQuery实现电梯导航模块的具体代码，供大家参考，具体内容如下

功能模块

1、当页面滚动到电器的模块，显示电梯导航

2、点击电梯导航中的 li，页面滚动到对应的内容区域

3、为当前点击的 li 添加 current 类

4、页面内容滚动到第几个区域，左侧的电梯导航自动高亮对应的 li

5、为页面滚动设置节流阀(点击 li 时，不进行第4步判断)

html部分结构


<ul class="sidebar">
  <li>手机模块</li>
  <li>电器模块</li>
  <li>产品模块</li>
  <li>服装模块</li>
  <li>鞋子模块</li>
 </ul>
 <section class="main">
  <div>手机模块</div>
  <div class="model">电器模块</div>
  <div>产品模块</div>
  <div>服装模块</div>
  <div>鞋子模块</div>
</section>

css部分


* {
  margin: 0;
  padding: 0;
  margin: 0 auto;
 }
 div {
  width: 600px;
  height: 600px;
  border: 1px solid red;
 }
 li {
  list-style: none;
  border: 1px solid #abcdef;
  cursor: pointer;
 }
 .sidebar {
  display: none;
  position: fixed;
  left: 0;
  top: 350px;
  width: 66px;
  height: 200px;
 }
 .current {
  background-color: red;
 }

jQuery部分


//节流阀开启
 var flag = true
 //页面滚动事件
 $(window).scroll(function() {
   // 当页面滚动到电器模块侧边栏显示
   $(this).scrollTop() >= $('.model').offset().top ? $('.sidebar').show() : $('.sidebar').hide()
    // 遍历div
   $('.main div').each(function(i, item) {
    if (flag == false) {
     return
    }
    var Top = $(item).offset().top
     // 滚动的距离大于等于当前盒子离顶部的距离
    if ($(window).scrollTop() >= Top) {
    //显示高亮
     $('.sidebar li').eq(i).addClass('current').siblings().removeClass('current')
    }
   })
  })
  //点击让li,出现在对应的位置
  //绑定点击事件,获取索引,获取楼层与顶部的距离,给html添加动画
 $('.sidebar li').click(function() {
  // 节流阀关闭了
  flag = false
   // 改变背景颜色
   // 获取当前的索引值
  var index = $(this).index()
   // 获取当前索引位置上的盒子离顶部的距离
  var top = $('div').eq(index).offset().top
   // 给html添加动画
  $('html,body').animate({
   scrollTop: top
  }, function() {
   flag = true
  })
  //点击显示高亮
  $(this).addClass('current').siblings().removeClass('current')
})