jquery頁面滾動事件的使用

來源:互聯網
上載者:User

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

  • 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. 其他

  當然,這裡還有一些東西沒有提到,不過也很重要,比如如何固定捲軸不能移動,回到頂部裡的小三角的製作等等;



相關文章

Alibaba Cloud 10 Year Anniversary

With You, We are Shaping a Digital World, 2009-2019

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。