window.scroll chức năng đóng băng firefox

Question

Tôi đang làm việc trên một trang có menu cố định chọn sau khi người dùng đã cuộn một khoảng cách nhất định từ trên xuống và khi họ cuộn xuống trang, các liên kết khác nhau từ trình đơn được cung cấp một lớp thay đổi màu sắc. Tất cả điều này dường như hoạt động tốt trong Chrome và Safari, nhưng trong Firefox, trang bị đóng băng ở trên cùng. Tôi tự hỏi nếu nó lặp đi lặp lại thông qua một số mã không ngừng ... về cơ bản đóng băng cửa sổ.

Đây là mã của tôi.

$.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"); 
    } 

}); 

Tôi quên thêm định nghĩa setHash. Đây rồi.

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

Tôi cũng nhận thấy rằng CPU tăng tới 100% và tôi dường như không thể hiểu tại sao.

Sự cố ở phần thứ ba của mã bắt đầu bằng mã khác nếu (cuộn < = 380). Tôi đã tìm ra điều đó bằng quá trình loại bỏ. Ai có thể nhìn thấy nó looping hoặc làm một cái gì đó mà sẽ không bao giờ kết thúc ... hoặc sẽ giải thích tại sao firefox đóng băng ở đầu trang?

Tôi mới làm quen với tất cả những điều này ... Tôi chỉ nhặt jquery trong vài ngày qua, và về cơ bản tôi đã googling rất nhiều và thích ứng mã để nó phù hợp với những gì tôi cần.

Mọi trợ giúp sẽ được đánh giá cao.

Answer 1

Thực thi quá nhiều mã trên sự kiện cuộn quá mức, trên mỗi cuộn, trình duyệt kích hoạt sự kiện cuộn hàng trăm lần, bạn có thể xem xét sử dụng thư viện có các phương thức như throttle hoặc debounce.

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

Đó là một ý tưởng rất, rất, xấu để đính kèm xử lý sự kiện cửa sổ cuộn. Tùy thuộc vào trình duyệt, sự kiện cuộn có thể kích hoạt rất nhiều và đặt mã trong cuộc gọi lại cuộn sẽ làm chậm mọi nỗ lực di chuyển trang (không phải là ý tưởng hay). Bất kỳ sự suy giảm hiệu suất nào trong trình xử lý cuộn (scroll) cũng sẽ chỉ làm tăng hiệu suất của việc cuộn tổng thể. Thay vào đó, tốt hơn nên sử dụng một số bộ đếm thời gian để kiểm tra mỗi X mili giây HOẶC để đính kèm một sự kiện cuộn và chỉ chạy mã của bạn sau khi trì hoãn (hoặc thậm chí sau một số lần thực thi - và sau đó là sự chậm trễ). http://ejohn.org/blog/learning-from-twitter/

Answer 2

Về cơ bản, bạn đang thực hiện quá nhiều trong sự kiện cuộn. Như @undefined đã nói, trình duyệt gọi điều này nhiều hơn bạn nghĩ. Một số mẹo:

Khi bên trong một hàm sẽ được gọi nhiều lần, hãy tạo các đối tượng jQuery của bạn. Bằng cách đó, mỗi khi hàm được gọi, nó không tái tạo lại cùng một đối tượng jQuery.

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

Tương tự như vậy, khi gọi hơn và hơn nữa, thêm và loại bỏ các lớp học có thể tiêu tốn rất nhiều mỗi lần sử dụng của bạn - Đặc biệt là khi bạn đang truy cập vào một lớp học toàn bộ các yếu tố, như trong $('.nav').addClass("f-nav");.

Thay vào đó, hãy thử thêm/xóa các lớp chỉ khi chúng không tồn tại.Một cái gì đó như:

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; 
    } 
}); 

Tất cả những gì đã nói, nó vẫn có thể cuộn chậm với tất cả mã này được đính kèm với sự kiện cuộn. Có thể có một cách khác bạn có thể có được hiệu ứng tương tự. Nếu firefox bị đóng băng, tôi chỉ có thể tưởng tượng mức độ chậm này trong IE.

Answer 3

Ngoài các vấn đề khác, $('body').scrollTop() sẽ luôn trả về 0 trong Firefox. Khi setHash() chạy $('html,body').scrollTop(scrollmem);}, nó sẽ nhảy lên đầu màn hình, trông giống như bị kẹt ở đầu màn hình khi người dùng tải trang lần đầu tiên. $(window).scrollTop(), kết hợp với điều chỉnh, sẽ giải quyết vấn đề này.