Gắn bó Div lên đầu sau khi cuộn qua nó

Question

Ngay bây giờ, tôi có thể dán div lên trên cùng sau khi cuộn xuống 320px nhưng tôi muốn biết nếu có cách nào khác để đạt được điều này. Dưới đây tôi có mã của tôi:

jQuery(function($) { 
    function fixDiv() { 
     if ($(window).scrollTop() > 320) { 
      $('#navwrap').css({ 'position': 'fixed', 'top': '0', 'width': '100%' }); 
     } 
     else { 
      $('#navwrap').css({ 'position': 'static', 'top': 'auto', 'width': '100%' }); 
     } 
    } 
    $(window).scroll(fixDiv); 
    fix5iv(); 
}); 

nó hoạt động, nhưng một số divs trên nó sẽ không phải luôn luôn cùng một chiều cao vì vậy tôi không thể dựa vào các 320px. Tôi làm cách nào để làm việc này mà không cần sử dụng if ($(window).scrollTop() > 320) để tôi có thể làm cho nó mờ đi ở trên cùng sau khi người dùng cuộn qua div #navwrap?

Answer 1

Thử sử dụng offset().top của phần tử #navwrap. Bằng cách đó, phần tử sẽ được cố định từ vị trí bắt đầu của nó trong tài liệu, bất kể nó ở đâu. Ví dụ:

function fixDiv() { 
    var $div = $("#navwrap"); 
    if ($(window).scrollTop() > $div.data("top")) { 
     $div.css({'position': 'fixed', 'top': '0', 'width': '100%'}); 
    } 
    else { 
     $div.css({'position': 'static', 'top': 'auto', 'width': '100%'}); 
    } 
} 

$("#navwrap").data("top", $("#navwrap").offset().top); // set original position on load 
$(window).scroll(fixDiv); 

Example fiddle