頁面滾動事件的使用

　　本文作者：wenzi

　　原文地址：http://www.cnblogs.com/xumengxuan/p/4133994.html

　　在現在更加追求頁面加載速度和用戶體驗的情況下，頁面的滾動事件使用的越來越多。通常我們使用滾動事件主要做的事情主要有：

• ajax異步加載，加快頁面首次加載的速度
• 懶加載（或延遲加載）：先把HTML元素放到textarea標簽中，或把img的鏈接先放到一個字段里，頁面滾動到某個位置時才進行開始加載
• 頂部導航或側邊導航的焦點跟蹤
• 側邊數字導航的跟蹤（例如百度經驗）
• “回到頂部”功能

 

　　這兩天做了一個demo，大家可以參考一下：頁面滾動效果　　

 

　　

 　　上圖中指出了用滾動事件實現的功能，不過demo中沒有實現異步加載的功能，其實懶加載和異步加載的原理差不多，只不過一個是先把數據請求了只是不加載，一個是滾動到位置了才用ajax請求數據。

 

　　在這里我講一下這些功能的實現方式：

　　1. 頂部導航的焦點追蹤

　　焦點的追蹤，顧名思義：當我們移動到哪個區域時，焦點就移動到哪個導航元素上，指示我們當前查看的是哪個區域。當然，這個功能的前提是我們需要知道每個元素距內容頂部的高度。

// 獲取每個item距頂部的高度,$item為區域的綜合，listTop用來存儲每個區域距頂部的高度
$item.each(function(index, el) {
    listTop.push($(el).offset().top);
});

 

　　我們從demo中也能看到，當aaaa區域到達頂部時，導航的position變成fixed，然后開始跟蹤；滾動條向上滑動，aaaa離開頂部時，導航重新變回原來的樣式。其實，這只是我們看到是這個樣子，導航的樣式切換來切換去。但實際上我們並不是這樣實現的，實際中這是兩個導航（O(∩_∩)O~），只不過讓其中一個導航（稱為A）不動，另一個導航（稱為B）顯示隱藏而已，導航B填充導航A的內容即可。在獲取了這些item距頂部的高度后，那么我們就在滾動事件中判斷，滾動條的高度是否超過了第一個item的高度，如果超過導航B顯示即可，否則導航B隱藏（代碼中.navfix即導航B，winTop為滾動條的高度）。

// 是否顯示頂部導航
winTop < listTop[0] ? $(".navfix").hide() : $(".navfix").show();

 

　　現在重點來了，導航B顯示出來了，那么就需要當前所在的區域和焦點對應上：剛才我們已經獲取到每個區域的高度了，現在我們就計算一下滾動條的高度在哪個區間（編號K），計算出區間后，我們就可以給哪個導航元素相應的樣式了：

• winTop<listTop[0]  ： 不在任何區域
• winTop>=listTop[0] && winTop<listTop[1] : 在區域aaaa
• winTop>=listTop[1] && winTop<listTop[2] : 在區域bbbb
• winTop>=listTop[2] && winTop<listTop[3] : 在區域ccccc
• inTop>=listTop[3] : 在區域dddd

// 檢測所在區域
for (; i < t; i++) {
    if ( winTop > listTop[t-1] ) {
        k = t-1;
        break;
    }else if ( winTop>=listTop[i-1] && winTop < listTop[i] ) {
        k = i-1;
        break;
    }
}

// 頂部導航效果
if( k > -1 ){
    $li.removeClass('hover');
    $li.eq(k).addClass('hover');
}

 

　　k默認的是-1，即不在任何區域，若k>-1即肯定處在某個區域內，先清除導航中所有元素的樣式，然后再指定樣式

 

　　2. 側邊數字導航

　　其實側邊數字導航與頂部導航實現的原理一樣：數字側邊欄也是有兩個（跟着區域移動的數字導航A，固定導航B），當某個數字跟着區域移動時，導航B中相應的數字隱藏；當數字到達頂部時，導航A中的數字隱藏，導航B中的數字顯示；即使區域的數字到達頂部不再移動，那也不能立即變成灰色，應當還是綠色，只有該區域超過窗口上邊框才能變成藍色。這就形成了我們現在看到的效果。

　　這里的重點是計算出什么時候隱藏導航A中的數字，顯示導航B中的數字，而且導航B的數字顯示什么顏色：每次滾動時，都首先讓導航A中的數字顯示，導航B的數字隱藏，然后計算每個區域所在的位置，如果某個區域距頂部的高度與滾動條的高度小於了導航B的數字的高度，就說明導航A中的數字該隱藏，導航B的數字該顯示了；那顯示的數字呈現什么顏色呢，剛才我們計算出了當前所在區域的編號K，那么區域編號小於編號K都是已經看過的，就顯示灰色，否則就是正在看或者沒看的區域就顯示綠色。

// 側邊數字導航
$item.find(".item-icon").show();    // 跟着區域移動的數字
$step_a.css('visibility', 'hidden');// 固定導航的數字
for(i=0; i<t; i++){
    if(listTop[i]-winTop<i*32+35){
        $item.eq(i).find(".item-icon").hide();
        $step_a.eq(i).css({'visibility':'visible', 'background-color': (i<k?'#888':'#008B00') });
    }
}

 

 

　　3. 懶加載

　　通常加載DOM元素時需要對頁面進行渲染，耗費時間，那么我們就先把這些DOM元素存儲起來，等需要加載的時候再去加載，用來加快頁面初始的加載；img圖片同理。

// 懶加載底部內容
if( $copyright.attr("loaded")!="loaded" && (winTop+800 > copyTop)){
    var text = $copyright.find('textarea').val();
    $copyright.html(text);

    $copyright.attr("loaded", "loaded");
}

 

 

　　圖片的路徑我們可以先放到一個字段中，比如data-src，等需要加載該圖片時，則從data-src中取出該值並賦值給src，然后請求圖片.

 

　　4. “回到頂部”功能

　　“回到頂部”功能，即將scrollTop的值設置為0的過程，如果需要緩沖效果，那么就給它一個緩沖時間

// 回到頂部
$("#backtotop").on('click', function(event) {
    event = event || window.event;

    var winTop = $(window).scrollTop();
    $('body').animate({scrollTop:0}, winTop/4);

    event.preventDefault();
});

 

 

　　5. 其他

　　當然，這里還有一些東西沒有提到，不過也很重要，比如如何固定滾動條不能移動，回到頂部里的小三角的制作等等；