Cách lấy giá trị vị trí trên cùng trong khi cuộn

Question

Tôi đang cố gắng chạy một số tập lệnh khi div đạt đến một điểm nhất định khi nó được cuộn. Có một điều hướng cố định và khi người dùng cuộn cửa sổ, nó giả sử thay đổi tên nav khi nó đến gần nav. Tôi đang sử dụng chức năng .scroll $ (cửa sổ) nhưng nó chỉ kiểm tra vị trí div một lần và không cập nhật giá trị. Làm thế nào để làm cho di chuyển kiểm tra kích thước cửa sổ mỗi 5-10 px di chuyển để nó không mất quá nhiều bộ nhớ/chế biến. Mã này được thiết lập tại địa chỉ: http://jsfiddle.net/rexonms/hyMxq/

HTML

<div id="nav"> NAVIGATION 
    <div class="message">div name</div> 
</div> 
<div id="main"> 
<div id="a">Div A</div> 
<div id ="b"> Div B</div> 
<div id ="c"> Div C</div> 
</div>​ 

CSS

#nav { 
    height: 50px; 
    background-color: #999; 
    position:fixed; 
    top:0; 
    width:100%; 

} 

#main{ 
    margin-top:55px; 
} 
#a, #b, #c { 
    height:300px; 
    background-color:#ddd; 
    margin-bottom:2px; 
} 

SCRIPT

$(window).scroll(function() { 

    var b = $('#b').position(); 

    $('.message').text(b.top); 

    if (b.top == 55) { 
     $('.message').text("Div B"); 
    } 
});​ 

Answer 1

Hãy thử điều này jsFiddle example

$(window).scroll(function() { 
    var scrollTop = $(window).scrollTop(), 
     divOffset = $('#b').offset().top, 
     dist = (divOffset - scrollTop); 
    $('.message').text(dist); 
    if (b.top == 55) { 
     $('.message').text("Div B"); 
    } 
});​ 

Mã ban đầu của bạn chỉ kiểm tra vị trí của div so với phần trên cùng của tài liệu không bao giờ thay đổi. Bạn cần tính toán số lượng cuộn cửa sổ đã phát sinh và tính toán tương ứng.

Cũng lưu ý sự khác biệt của các phương thức .position() và .offset() của jQuery. Phương thức .position() cho phép chúng ta lấy lại vị trí hiện tại của một phần tử liên quan đến cha mẹ bù đắp. Tương phản điều này với .offset(), truy xuất vị trí hiện tại liên quan đến tài liệu.