5

当 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");
    }
});​
4

1 回答 1

9

试试这个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()，后者检索相对于文档的当前位置。

于 2012-09-19T21:01:22.067 回答