2012-11-30 46 views
4

當我有鄰近應該添加或移除類名「卡住」的頁的頂部的導航容器(位置之間切換:靜態的和位置是:固定)時的頁面滾動超出特定值。似乎在FF和Chrome中工作正常,但IE(7,8和9)當然有問題。窗口滾動事件引起IE滯後差些,使用鼠標滾輪

滾動使用鼠標滾輪時,但如果我搶,然後拖動滾動條HORIZ隨後的頁面,沒有滯後順利滑動頁面滯後嚴重(基本上是不可用)。

我摸索透露,這可能是因爲IE瀏覽器的執行速度比其他瀏覽器更的方式滾動事件,但我無法弄清楚到底如何節流被解僱事件的數量。您可以在下面的代碼塊見我還使用了「滾動一站式」解決方案,但我真的需要也能夠執行的回調而當他們超越頁面上的某一點的用戶仍在滾動。

我想我實現它是相當的方式,剝離下來的和基本的,但有沒有更好的方式來處理這個問題,至少只是IE?

var scrollValue = 0; 
var scrollTimer = false; 

$(window).bind('scroll', function(){ 
    scrollValue = $(window).scrollTop(); 

    // SET TIMER DELAY FOR SCROLL-STOP 
    if (scrollTimer) { 
     clearTimeout(scrollTimer); 
    } 
    scrollTimer = setTimeout(scrollStopped, 25); 

    // STICK/UNSTICK HEADER 
    if (scrollValue > 320){ 
     if (!$(stickyWrap).hasClass('stuck')){ 
      $(stickyWrap).addClass('stuck') 
     } 
    } else { 
     if ($(stickyWrap).hasClass('stuck')){ 
      $(stickyWrap).removeClass('stuck'); 
     } 
    } 
}); 
+0

無關,與你的答案,但觸發事件'$(窗口)。在( '滾動',函數(){...})觸發( '滾動');'因爲頁面在加載時不總是處於0。 – Popnoodles

+0

我可以猜測,由於您執行setTimelimit的時間很短,IE瀏覽器比較滯後。你可以嘗試增加到100 –

回答

1

打倒超時了開關

如果你做的jQuery的一點更加簡單,並增加了一個開關,只有一次前和閾值後,就應該加快速度執行什麼很好。

var header = $('.stickyWrap'), 
    trig = 320, 
    go = true; 

$(window).bind('scroll', function(){ 
    var scrollValue = $(this).scrollTop(); 

    if ((go && scrollValue > trig) || (!go && scrollValue <= trig)) {//before or after 
     header.toggleClass('stuck');//toggle class 
     go ? go = false : go = true;//toggle boolean 
    } 
}); 

現在將只嘗試它跨越的320閾值時,只有一次前執行一次東西。

Made A Fiddle >

+0

這是否解決你的問題? – FiLeVeR10

+2

我不知道。這個問題是幾年前,我甚至不記得發生了什麼事情,或者如果解決了。我敢肯定,這與IE是最愚蠢的事情有點相關。 – relic