本文例項為大家分享了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')


})

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。