快捷導(dǎo)航

jQuery實現(xiàn)電梯導(dǎo)航模塊

更新時間：2020年12月22日 10:40:41 作者：李大璟

這篇文章主要為大家詳細介紹了jQuery實現(xiàn)電梯導(dǎo)航模塊，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了jQuery實現(xiàn)電梯導(dǎo)航模塊的具體代碼，供大家參考，具體內(nèi)容如下

功能模塊

1、當(dāng)頁面滾動到電器的模塊，顯示電梯導(dǎo)航
2、點擊電梯導(dǎo)航中的 li，頁面滾動到對應(yīng)的內(nèi)容區(qū)域
3、為當(dāng)前點擊的 li 添加 current 類
4、頁面內(nèi)容滾動到第幾個區(qū)域，左側(cè)的電梯導(dǎo)航自動高亮對應(yīng)的 li
5、為頁面滾動設(shè)置節(jié)流閥(點擊 li 時，不進行第4步判斷)

html部分結(jié)構(gòu)

<ul class="sidebar">
  <li>手機模塊</li>
  <li>電器模塊</li>
  <li>產(chǎn)品模塊</li>
  <li>服裝模塊</li>
  <li>鞋子模塊</li>
 </ul>

 <section class="main">

  <div>手機模塊</div>
  <div class="model">電器模塊</div>
  <div>產(chǎn)品模塊</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部分

//節(jié)流閥開啟
 var flag = true
 //頁面滾動事件
 $(window).scroll(function() {
   // 當(dāng)頁面滾動到電器模塊側(cè)邊欄顯示
   $(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
     // 滾動的距離大于等于當(dāng)前盒子離頂部的距離
    if ($(window).scrollTop() >= Top) {
    //顯示高亮
     $('.sidebar li').eq(i).addClass('current').siblings().removeClass('current')
    }
   })
  })
  //點擊讓li,出現(xiàn)在對應(yīng)的位置
  //綁定點擊事件,獲取索引,獲取樓層與頂部的距離,給html添加動畫
 $('.sidebar li').click(function() {

  // 節(jié)流閥關(guān)閉了
  flag = false
   // 改變背景顏色
   // 獲取當(dāng)前的索引值
  var index = $(this).index()
   // 獲取當(dāng)前索引位置上的盒子離頂部的距離
  var top = $('div').eq(index).offset().top
   // 給html添加動畫
  $('html,body').animate({
   scrollTop: top

  }, function() {
   flag = true
  })
  //點擊顯示高亮
  $(this).addClass('current').siblings().removeClass('current')


})