案例分析：

1. 當我們滾動到 今日推薦 模組，就讓電梯導航顯示出來

2. 點選電梯導航頁面可以滾動到相應內容區域

3. 核心演算法：因為電梯導航模組和內容區模組一一對應的

4. 當我們點選電梯導航某個小模組，就可以拿到當前小模組的索引號

5. 就可以把animate要移動的距離求出來：當前索引號內容區模組它的offset().top

6. 然後執行動畫即可

7. 當我們點選電梯導航某個小li， 當前小li 新增current類，兄弟移除類名

8. 當我們頁面滾動到內容區域某個模組， 左側電梯導航，相對應的小li模組，也會新增current類， 兄弟移除current類。

9. 觸發的事件是頁面滾動，因此這個功能要寫到頁面滾動事件裡面。

10. 需要用到each，遍歷內容區域大模組。 each裡面能拿到內容區域每一個模組元素和索引號

11. 判斷的條件： 被捲去的頭部 大於等於 內容區域裡面每個模組的offset().top

12. 就利用這個索引號找到相應的電梯導航小li新增類。

實現程式碼：

// 電梯導航
$(function () {
  // 每次點選都會執行滾動動畫，滾動又會觸發新增current類 此時需要節流閥（互斥鎖）控制
  // 節流閥
  var flag = true; //節流閥預設開啟
  // 1.顯示隱藏電梯導航
  var asideTop = $(".recom").offset().top;
  // 載入頁面就呼叫函式 不用等到滾動螢幕才顯示隱藏
  toggleAside();
​
  function toggleAside() {
    // 滾動到相應位置時顯示電梯導航欄
    if ($(document).scrollTop() >= asideTop) {
      $(".aside").fadeIn();
     } else {
      $(".aside").fadeOut();
     }
   };
  $(window).scroll(function () {
    toggleAside();
    // 3.頁面滾動到某個區域，對應小li新增current類名
    // 節流閥開啟時才執行裡面程式碼
    if (flag) {
      // 遍歷每個內容元素，獲得索引號
      // 滾動到相應內容offset().top位置時，就把對應索引號給小li
      $(".floor .w").each(function (i, ele) {
        if ($(document).scrollTop() >= $(ele).offset().top) {
          // console.log(i);
          $(".aside li").eq(i).addClass("current").siblings().removeClass();
         }
       })
     }
   });
  // 2. 點選小li跳轉到對應位置
  $(".aside li").on("click", function () {
    flag = false; //每次點選關閉節流閥
    // 獲取當前點選的小li索引號 點選第幾個小li就跳轉到對應第幾個元素的offset().top位置
    // console.log($(this).index());
    var current = $(".floor .w").eq($(this).index()).offset().top;
    // 只有元素可以做動畫 所以用html和body
    $("html,body").stop().animate({
      scrollTop: current
     }, function () {
      // 執行完動畫滾動就開啟節流閥
      flag = true;
     });
    // 給當前點選的小li新增current類名
    $(this).addClass("current").siblings("li").removeClass();
   });
})