Jquery 偏移量在滚动时只返回一个数字
Jquery offset return just one number while scrolling
我有一个网页,我需要获取页面元素的当前顶部位置。
我有一些div,他们每个人都有100%
的高度,我在那里有我的内容。
我想从顶部获取这些div 位置并使用它。 但是当我这样做时,它只返回一个数字,并且在滚动时不会更改。
这是我的代码:
.HTML:
<header id="header">
<div id="menu-div" class="container-full">
<div class="container">
<a href="#">TEST</a>
<a href="#">TEST</a>
<a href="#">Test</a>
<a href="#">Test</a>
<a href="#">Test</a>
<a id="request-demo-a" class="pull-right" href="#">TEST demo</a>
</div>
</div>
</header>
<div id="first-div" class="center a-div">
test content here...<br/>test content here...<br/>test content here...<br/>test content here...<br/>test content here...<br/>test content here...<br/>test content here...<br/>test content here...<br/>test content here...<br/>test content here...<br/>test content here...<br/>test content here...<br/>test content here...<br/>test content here...<br/>test content here...<br/>
</div>
<div id="full-div" class="container a-div">
test content here...<br/>test content here...<br/>test content here...<br/>test content here...<br/>test content here...<br/>test content here...<br/>test content here...<br/>test content here...<br/>test content here...<br/>test content here...<br/>test content here...<br/>test content here...<br/>test content here...<br/>test content here...<br/>test content here...<br/>test content here...<br/>test content here...<br/>test content here...<br/>test content here...<br/>
</div>
<div id="other-div" class=" a-div">
<br/>test content here...<br/>test content here...<br/>test content here...<br/><br/>test content here...<br/>test content here...<br/>test content here...<br/><br/>test content here...<br/>test content here...<br/>test content here...<br/><br/>test content here...<br/>test content here...<br/>test content here...<br/><br/>test content here...<br/>test content here...<br/>test content here...<br/><br/>test content here...<br/>test content here...<br/>test content here...<br/><br/>test content here...<br/>test content here...<br/>test content here...<br/>
</div>
<div id="other-div" class=" a-div">
<br/>test content here...<br/>test content here...<br/>test content here...<br/><br/>test content here...<br/>test content here...<br/>test content here...<br/><br/>test content here...<br/>test content here...<br/>test content here...<br/><br/>test content here...<br/>test content here...<br/>test content here...<br/><br/>test content here...<br/>test content here...<br/>test content here...<br/><br/>test content here...<br/>test content here...<br/>test content here...<br/><br/>test content here...<br/>test content here...<br/>test content here...<br/>
</div>
.CSS:
.a-div{
height:100%;
}
#full-div{
position:absolute;
top:100%;
width: 100%;
height: auto;
background: white;
z-index:5;
}
#first-div{
width:100%;
height:100%;
position:fixed;
left:0;
right:0;
top:0;
bottom: 0;
margin: auto;
color:white;
z-index:-1;
}
#menu-div{
background: white;
padding:7px;
position: fixed;
z-index:10;
}
#menu-div .container a{
margin-left: 15px;
display:inline-block;
font-size:large;
}
#request-demo-a{
padding:5px;
border: 2px solid #FF8000;
color: white;
text-shadow: none;
background: orange;
text-decoration: navajowhite;
}
#request-demo-a:hover, #request-demo-a:focus{
background: #FF8000;
}
JavaScript (Jquery):
$(function(){
/**start:Scroll*/
$(document).scroll(function(){
$("#request-demo-a").html($('#full-div').offset().top);
/// I want this return current value of full-div!
//And when it become equel 0 do something! (This is just example)
});
/**End: Scroll*/
})
JSFiddle-demo
我想获得#full-div
的位置并使用它,当它等于 0 时,做某事(意味着到达顶部时),对于其他人div,我想在某个位置做某事。
但是为什么$('#full-div').offset().top
滚动时只返回一个数字呢?
滚动时偏移量不会改变,offset()
检索元素相对于文档的当前位置,并且整个文档都在滚动,因此没有任何真正变化,元素仍然在文档中完全相同的位置。
如果要滚动距离,请使用 scrollTop
,然后将其与元素偏移量进行比较,以查看页面的滚动量是否与元素到文档顶部的距离相同
$(document).on('scroll', function(){
var scrolled = $(window).scrollTop();
var offset = $('#full-div').offset().top;
if ( offset <= scrolled ) {
// element is scrolled to top or above
}
});
相关文章:
- 递增一个数字而不去掉前导零
- 制作一个regex来验证只有一个数字的字符串
- 如何使用至少一个数字、一个大写字母和6-20个字符验证密码
- 有没有办法在里面看到一个数字'的64位浮点IEEE754表示
- 我如何解析二's是一个数字的补码字符串
- 为什么我需要在这里输入var,为什么它会给我一个数字作为答案?(Javascript)
- 为什么 JavaScript 如果一个数字有一个前导零,就将其视为八进制
- 增加一个数字并将其附加到函数
- 如何让计算机猜测一个数字并返回猜测次数(Javascript)
- 正则表达式删除最后一个数字之后的字符串
- 用户在文本框中输入一个数字,并根据使用 PHP 输入的数字重定向到另一个网页
- 每次使用 Javascript 加载页面时增加一个数字(变量)的简单方法
- Javascript Regexp :如果一个字母与一个数字相邻,请添加下划线
- jQuery UI Slider ui.value 获取最后一个数字
- JavaScript 使用多少位来表示一个数字
- Javascript提示和警报输入一个数字,它将循环,您将输入数字以获得它的平均值
- RXJS 为什么只有最后一个数字同时有 a 和 b
- 检查字符串是否等于一个单词和一个数字
- 对负指数调用的.toFixed()返回一个数字,而不是字符串
- 脚本每天添加相同的数字,月底再添加一个数字