案例：電梯導航功能

實現功能：

1. 點擊左邊的小li，會滾動到右邊對應的內容區（電梯導航 -> 內容區）

① 當滾動到某一位置時，就讓電梯導航顯示出來

② 點擊電梯導航頁面可以滾動到相應內容區域

③ 核心算法：因為電梯導航模塊和內容區模塊是一一對應的，所以對應的索引號是一樣的

④ 當點擊電梯導航某個小模塊時，就可以拿到當前小模塊的索引號

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

⑥ 然后執行動畫即可

2. 當滾動到右邊的內容區，作邊的小li會添加相應的類（內容區 -> 電梯導航）

① 當點擊電梯導航的某個小li，當前小li添加current類，兄弟移除類名

② 當頁面滾動到內容區域某個模塊，左側電梯導航相對應的小li模塊，也會添加current類，兄弟移除current類

③ 觸發的事件是頁面滾動，因此這個功能要寫到頁面滾動事件里面

④ 需要用到each遍歷內容區域大模塊。each里面能拿到內容區域每一個模塊元素和索引號

⑤ 判斷的條件：被卷去的頭部 >= 內容區域里面每個模塊的offset().top

⑥ 就利用這個索引號找到相應的電梯導航小li，添加current類

 

一個bug：當我們刷新頁面的時候並不能顯示電梯導航，這是因為我們寫的代碼只允許頁面滾動的時候，並且滾動到一定的位置才能顯示電梯導航

解決辦法：將顯示和隱藏電梯導航的功能封裝到一個函數里去，在頁面加載的時候調用一次，頁面滾動的時候再調用一次。

 

另一個bug：此時如果點擊電梯導航的某一個小li時，會出現重新把其他的小li樣式背景選擇一遍之后才到被點擊的小li上。而我們想要的效果是，點擊某個小li后，直接去往被點擊的小li那添加樣式，而不需要它多次選擇其他的小li，出現類似抖動的情況。

為什么會出現這個問題呢？這是因為我們的代碼中寫的是，當我們點擊某個小li之后，會使我們的頁面滾動起來，而在滾動的過程中，會觸發給當前內容區對應的小li增加樣式的事件。

如何解決呢？當我們點擊了小li，此時不需要執行頁面滾動事件里面的小 li 的背景選擇。

我們可以使用節流閥的方法，也叫互斥鎖，增加一個flag判斷條件，判斷是點擊事件還是滾動事件，如果是點擊事件，就上一個鎖，不要執行滾動事件里面的代碼，點擊事件完成之后再釋放鎖。

    <!-- 樓層區 start -->
    <div class="floor">
        <!-- floor不需要給高度，里面的樓層盒子撐開就行了 -->
        <!-- 一樓家電模塊 -->
        <div class="jiadian w">
            家用電器模塊
        </div>
        <!-- 二樓手機模塊 -->
        <div class="shouji w">
            手機通訊模塊
        </div>
        <!-- 三樓電腦模塊 -->
        <div class="diannao w">
            電腦辦公模塊
        </div>
        <!-- 四樓家具模塊 -->
        <div class="jiaju w">
            精品家具模塊
        <!-- 之后的樓層都接在后面疊加，布局直接采用上面的樣式布局，不需要做大的修改 -->
    </div>
    <!-- 樓層區 end -->

    <!-- 固定電梯導航 start -->
    <div class="fixedtool">
        <ul>
            <li class="current">家用電器</li>
            <li>手機通訊</li>
            <li>電腦辦公</li>
            <li>家具家居</li>
        </ul>
    </div>
    <!-- 固定電梯導航 end -->

// JS邏輯代碼
$(function() {
    // 當我們點擊了小li，此時不需要執行頁面滾動事件里面的小 li 的背景選擇。
    // 使用節流閥的方法，設置一個flag標識
    var flag = true;
    // 1. 顯示隱藏電梯導航
    // 直到滾動條滾動到今日推薦的部分，就顯示電梯導航
    var toolTop = $(".recommend").offset().top;
    toggleTool();
    // 顯示和隱藏電梯導航的功能，在頁面加載的時候調用一次
    function toggleTool() {
        if ($(document).scrollTop() >= toolTop) {
            $(".fixedtool").fadeIn();
        } else {
            $(".fixedtool").fadeOut();
        }
    }
    // 在頁面滾動的時候再調用一次
    $(window).scroll(function() {
        toggleTool();
        // 3. 頁面滾動到某個內容區域，左側電梯導航小li相應添加和刪除current類名
        if (flag) {
            $(".floor .w").each(function(i, ele) {
                if ($(document).scrollTop() >= $(ele).offset().top) {
                    // console.log(i);  i表示當前內容區的索引號
                    $('.fixedtool li').eq(i).addClass('current').siblings().removeClass('current');
                }
            });
        }        
    });
    // 2. 點擊電梯導航頁面可以滾動到相應的內容區域
    $('.fixedtool li').click(function() {
        flag = false;
        // console.log($(this).index());
        // 點擊之后讓當前的小li添加背景顏色，兄弟元素清除樣式
        $(this).addClass('current');
        $(this).siblings().removeClass('current');
        // 當每次點擊小li，就需要計算出頁面要去往的位置
        // 選出對應索引號的內容區的盒子，計算它的.offset().top
        var current = $(".floor .w").eq($(this).index()).offset().top;
        // 頁面動畫滾動效果
        $("body, html").stop().animate({
            scrollTop: current
        }, function() {
            // 當點擊小li，執行頁面滾動動畫完成之后，打開節流閥
            flag = true;
        });
    });
})