javascript - 如何在滚动时获取div的顶部位置值

Question

我试图在 div 滚动到某个点时运行一些脚本。有一个固定的导航，当用户滚动窗口时，它假设一旦接近导航就更改导航名称。我正在使用 $(window).scroll 函数，但它只检查一次 div 位置而不更新值。如何让每 5-10 像素移动一次滚动检查窗口大小，这样就不会占用太多内存/处理。代码设置在: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 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");
    }
});​

您的原始代码仅检查 div 相对于文档顶部的位置，该位置永远不会改变。您需要计算窗口产生的滚动量并进行相应计算。

还要注意 jQuery 的 .position() 和 .offset() 方法之间的区别。 .position() 方法允许我们检索元素相对于偏移父元素的当前位置。将此与 .offset() 进行对比，后者检索相对于文档的当前位置。