当我滚动到特定的<div>时，开始执行jQuery函数
当我滚动到特定的<div>时，开始执行jQuery函数
提问于 2014-02-21 21:27:56
我有一个在页面上显示动画计数器的jQuery脚本，但该脚本在页面加载时启动，并且我需要在用户向下滚动到特定<div>时加载它。
<script>
$({countNum: $('#counter').text()}).animate({countNum: 63 }, {
duration: 3000,
easing:'linear',
step: function() {
$('#counter').text(Math.floor(this.countNum));
},
complete: function() {
$('#counter').text(this.countNum);
}
});
</script>当我在页面上滚动到这个特定的<div>时，需要执行这个脚本。
<div id="counter"></div>回答 3
Stack Overflow用户
回答已采纳
发布于 2014-02-21 21:43:47
工作演示：http://jsfiddle.net/fedmich/P69sL/
试试这个，在start_count上添加你的代码...然后，确保添加一个布尔值，以便只运行代码一次。
$(function() {
var oTop = $('#counter').offset().top - window.innerHeight;
$(window).scroll(function(){
var pTop = $('body').scrollTop();
console.log( pTop + ' - ' + oTop ); //just for your debugging
if( pTop > oTop ){
start_count();
}
});
});
function start_count(){
alert('start_count');
//Add your code here
}Stack Overflow用户
发布于 2014-02-21 21:32:20
试试这个：
var eventFired = false,
objectPositionTop = $('#counter').offset().top;
$(window).on('scroll', function() {
var currentPosition = $(document).scrollTop();
if (currentPosition > objectPositionTop && eventFired === false) {
eventFired = true;
// your code
}
});Stack Overflow用户
发布于 2014-02-21 21:30:29
试试这个：
var div_top = $('#counter').offset().top;
$(window).scroll(function(){
if($(window).scrollTop() > div_top){
$({countNum: $('#counter').text()}).animate({countNum: 63 }, {
duration: 3000,
easing:'linear',
step: function() {
$('#counter').text(Math.floor(this.countNum));
},
complete: function() {
$('#counter').text(this.countNum);
}
});
}
});它检查div离顶部有多远(以px为单位)，以及您滚动了多远。每次滚动时都会勾选这个
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/21935762
复制相关文章
相似问题
腾讯云开发者
