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;
}

SCRIPT

$(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()进行对比，后者检索相对于文档的当前位置。

如何在滚动时获得div顶部位置值

1 个答案: