如何在滚动时获得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()方法之间的区别.该.position()方法允许我们检索元素相对于偏移父元素的当前位置.与此对比.offset(),检索相对于文档的当前位置.