如何在滾動時獲得div頂部位置值

Question

當div滾動到達某個點時，我正在嘗試運行一些腳本。 有一個固定的導航，當用戶滾動窗口時，它假設一旦接近導航，就更改導航名稱。 我正在使用$（window）.scroll函數，但它只檢查div位置一次而不是更新值。 如何滾動檢查窗口大小每5-10 px移動，以便它不需要太多的內存/處理。 代碼設置在： 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;
}

腳本

$(window).scroll(function() {

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

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

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

Answer 1

試試這個jsFiddle示例

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

您的原始代碼僅檢查div相對於文檔頂部的位置，該位置永遠不會更改。 您需要計算窗口已經發生的滾動量並相應地進行計算。

還要注意jQuery的.position()和.offset()方法之間的.offset() 。 .position()方法允許我們檢索元素相對於偏移父元素的當前位置。 將此與.offset()對比，后者檢索相對於文檔的當前位置。