jQuery实现电梯导航模块

  
手机模块
  
电器模块
  
产品模块
  
服装模块
  
鞋子模块
 

 


  
手机模块
  
电器模块
  
产品模块
  
服装模块
  
鞋子模块

* {
  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;
 }

//节流阀开启
 var flag = true
 //页面滚动事件
 $(window).scroll(function() {
   // 当页面滚动到电器模块侧边栏显示
   $(this).scrollTop() >= $('.model').offset().top &＃63; $('.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')


})