脚本在div的底部被触发而不是顶部
问题描述:
我想创建一个向上计数的脚本,当我到达特定的div时触发,而不是当它达到div的顶部时它会在触发底部时启动,为什么所以?脚本在div的底部被触发而不是顶部
我的html:
<div id="status_counter" class="status_bar">
<div class="container text-center">
<div class="row">
<div class="col-sm-3">
<div class="counter-item">
<h2><div class="counter" data-count="33">0</div></h2>
</div>
</div>
<div class="col-sm-3">
<div class="counter-item">
<h2><div class="counter" data-count="25">0</div></h2>!-
</div>
</div>
<div class="col-sm-3">
<div class="counter-item">
<h2><div class="counter" data-count="15">0</div></h2>
</div>
</div>
<div class="col-sm-3">
<div class="counter-item">
<h2><div class="counter" data-count="42">0</div></h2>
</div>
</div>
</div>
</div>
</div>
我counter.js:
var eventFired = false,
objectPositionTop = $('#status_counter').offset().top;
$(window).on('scroll', function() {
var currentPosition = $(document).scrollTop();
if (currentPosition > objectPositionTop && eventFired === false) {
eventFired = true;
$('.counter').each(function() {
var $this = $(this),
countTo = $this.attr('data-count');
$({ countNum: $this.text()}).animate({
countNum: countTo
},
{
duration: 2000,
easing:'linear',
step: function() {
$this.text(Math.floor(this.countNum));
},
complete: function() {
$this.text(this.countNum);
//alert('finished');
}
});
});
}
});
目前:当向下滚动到status_counter它不触发我的剧本,直到我向下滚动到它的底部。
我希望当我的屏幕上出现status_counter div时触发Count的脚本,所以当status_counter div的顶部/开始到达屏幕的底部时。
答
如果我理解过程rstand你的问题以及这应该工作:
var eventFired = false,
objectPositionTop = $('#status_counter').offset().top,
objectPositionBottom = objectPositionTop;
$(window).on('scroll', function() {
var currentPositionBottom = $(document).scrollTop() + $(window).height();
if (currentPositionBottom > objectPositionBottom && eventFired === false) {
eventFired = true;
$('.counter').each(function() {
var $this = $(this),
countTo = $this.attr('data-count');
$({countNum: $this.text()}).animate({
countNum: countTo
}, {
duration: 2000,
easing:'linear',
step: function() {
$this.text(Math.floor(this.countNum));
}, complete: function() {
$this.text(this.countNum);
}
});
});
}
});
答
您需要检查的元素的底部位置VS窗口的底部位置(这是scrollHeight属性+窗口的高度):
objectPositionTop = $('#status_counter').offset().top;
objectPositionBottom = objectPositionTop + $('#status_counter').height();
而且里面的scroll
可以使用:
var currentPositionBottom = $(document).scrollTop() + $(window).height();
if (currentPositionBottom > objectPositionBottom && eventFired === false) {
这里是你的代码的一个分支:
https://jsfiddle.net/rop0g9gz/1/
答
赶上div
你想你的时候算过它:
var exampleDiv = document.getElementById("#YOUR-DIV-ID")
并将其连接到mouseover
事件:
exampleDiv.addEventListener('mouseover' , your-count-function)
为什么底部的元素?我希望它在元素顶端(#status_counter)到达窗口底部时立即启动,一旦它出现在屏幕上以开始加载数字 – mheonyae
您说当前代码适用于元素的顶部。如果您想将其更改为元素的底部 - 此代码就是您要查找的内容。如果情况并非如此 - 请更新问题。 – Dekel
不,我说它工作的方式,所以它被触发在div的底部而不是顶部。在我的帖子结尾,我问到底是什么让它触发,因为我想知道错误... – mheonyae