window.scroll功能凍結火狐

我工作在頁面上有一個固定的菜單，用戶之後拿起滾動了從頂部一定距離，當他們向下滾動頁面，從菜單中選擇不同的鏈接中給出一個改變顏色的類。所有這些在Chrome和Safari中似乎都能很好地工作，但在Firefox中，頁面在頂部凍結。我想知道它是否不斷循環一些代碼......實質上是凍結了窗口。window.scroll功能凍結火狐

這是我的代碼。

$.localScroll({ 
    onBefore: function() { 
     $('body').data('scroll-executing', true); 

    }, 
    onAfter: function() { 
     $('body').data('scroll-executing', false); 
     $(window).trigger("scroll"); 
    } 
}); 

$(window).scroll(function() { 
    if ($(this).scrollTop() > 259) { 
     $('.nav').addClass("f-nav"); 
    } else { 
     $('.nav').removeClass("f-nav"); 
    } 
}); 

$(window).scroll(function() { 
    if ($('body').data('scroll-executing')) { 
     return; 
    } 
    // find the a with class 'active' and remove it 
    $("a").removeClass('active'); 
    // get the amount the window has scrolled 
    var scroll = $(window).scrollTop(); 
    // add the 'active' class to the correct #nav based on the scroll amount 

    if (scroll > 2150) { 
     $("#nav_3").removeClass('active'); 
     $("#nav_5").attr('class', 'active'); 
     setHash("contact"); 

    } else if (scroll > 1300) { 
     $("#nav_2").removeClass('active'); 
     $("#nav_3").attr('class', 'active'); 
     setHash("portfolio"); 

    } else if (scroll > 400) { 
     $("#nav_2").attr('class', 'active'); 
     setHash("about"); 

    } else if (scroll <= 380) { //when I remove this section, the problem goes away. 
     $("#nav_1").attr('class', 'active'); 
     setHash("home"); 
    } 

});

我忘了添加setHash定義。這裏是。

setHash = function(hash) { 
    var scrollmem = $('body').scrollTop(); 
    window.location.hash = hash; 
    $('html,body').scrollTop(scrollmem); 
}

我也注意到CPU上升到100％，我似乎無法弄清楚爲什麼。

的問題是在代碼與其他開始第三部分，如果（滾動< = 380）。我想通過消除的過程。任何人都可以看到它循環或做一些永遠不會結束的事情......或者可以解釋爲什麼firefox會在頁面頂部凍結？

我是新來的這一切......我剛拿起的jQuery在過去的幾天裏，我已經基本google搜索了很多，適應代碼，以便它適合我的需要。

任何幫助將不勝感激。

來源

2012-09-14 Daniel

你能給出一個鏈接到一個示例頁面，顯示問題，也許在jsfiddle.net或類似的東西？ –

在滾動事件上執行過多的代碼過度消耗，每次滾動時，瀏覽器都會觸發滾動事件百次，您可以考慮使用具有諸如throttle或debounce等方法的庫。

http://documentcloud.github.com/underscore/#throttle

這是一個非常，非常糟糕的主意，處理程序連接到窗口滾動的事件。根據瀏覽器的不同，滾動事件可能會觸發很多，並且在滾動回調中放置代碼會減慢任何滾動頁面的嘗試（不是一個好主意）。因此，滾動處理程序的任何性能下降都只會影響整個滾動的性能。相反，使用某種形式的計時器來檢查每個X毫秒或附加一個滾動事件，並且只在延遲後（甚至在給定數量的執行 - 然後延遲之後）運行您的代碼會更好。 http://ejohn.org/blog/learning-from-twitter/

來源

2012-09-14 17:07:31 undefined

間隔是一個好主意。 setHash也選擇了body而不是window，這也導致了一些問題。現在我有它的工作。現在是清理一些東西並開始緩存變量的時候了。謝謝你的幫助。 – Daniel

基本上你是在滾動事件執行太多。正如@undefined所說，瀏覽器比你想象的要多得多。一些提示：

當內將被多次調用功能，讓您的jQuery對象已創建。這樣，每次調用該函數時，都不會重新創建相同的jQuery對象。

var nav2 = $("#nav_2"); 
$(window).scroll(function() { 
    ... 
    nav2.removeClass('active'); 
    ... 
});

同樣，打電話過來的時候一遍又一遍，添加和刪除類可以消耗大量的處理週期的 - 特別是當你訪問一個全班的元素，就像在$('.nav').addClass("f-nav");。

相反，嘗試添加/刪除類僅當它們不存在。就像這樣：

var alreadyAdded = false; 
var alreadyRemoved = false; 
$(window).scroll(function() { 
    if ($(this).scrollTop() > 259) { 
     if(!alreadyAdded){ 
     $('.nav').addClass("f-nav"); 
     alreadyAdded = true; 
     alreadyRemoved = false; 
     } 
    } else if(!alreadyRemoved) { 
     $('.nav').removeClass("f-nav"); 
     alreadyAdded = false; 
     alreadyRemoved = true; 
    } 
});

所有這一切說，它仍然可能會緩慢滾動所有代碼附加到滾動事件。也許有另一種方式可以得到相同的效果。如果Firefox是凍結的，我只能想象在IE中必須有多慢。

來源

2012-09-14 17:24:34

除了其他問題，$('body').scrollTop()將始終在Firefox中返回0。當setHash()運行$('html,body').scrollTop(scrollmem);}時，它將跳轉到屏幕的頂部，當用戶第一次加載頁面時，該屏幕看起來完全像被卡在屏幕的頂部。 $(window).scrollTop()，連同節流，將解決這個問題。

來源

2012-09-14 21:19:49 Michael

window.scroll功能凍結火狐

回答

相關問題