如何在滚动时获取div顶部位置值
如何在滚动时获取div顶部位置值
提问于 2012-09-20 04:55:23
当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");
}
});回答 1
Stack Overflow用户
回答已采纳
发布于 2012-09-20 05:01:22
尝试此
$(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()，它检索相对于文档的当前位置。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/12502769
复制相关文章
相似问题
腾讯云开发者
