Question

当div滚动到时，我使用scrollTop函数来启动动画，延迟等。它适用于我的页面上的其他内容，但由于某种原因，此功能无法正常工作，并且会在页面加载时加载。

有没有人在我的代码中看到任何错误？这可以在这里看到：

<div class="blue-box-container">
</div>

$(function() {
    var oTop = $('.blue-box-container').offset().top - window.innerHeight;
    $(window).scroll(function() {
        var pTop = $('body').scrollTop();
        console.log(pTop + ' - ' + oTop);
        if (pTop > oTop) {
            blueBoxDelays();
        }
    });
});
$('.fadeBlock').css('display', 'none');
blueBoxDelays();

function blueBoxDelays() {
    var delay = 0;
    $('.fadeBlock').each(function(i) {
        $(this).delay(400 + delay).fadeIn(1000);
        delay = 200 * (i + 1);
    });
};

Answer 1

我将你的代码提取到一个小提琴并且它正常工作https://jsfiddle.net/26jw7Low/3/，你只需要删除对初始函数之外的blueBoxDelays（）的调用，如下所示。

$(function() {
    var oTop = $('.blue-box-container').offset().top - window.innerHeight;
    $(window).scroll(function() {
        var pTop = $('body').scrollTop();
        console.log(pTop + ' - ' + oTop);
        if (pTop > oTop) {
            blueBoxDelays();
        }
    });
});
$('.fadeBlock').css('display', 'none');
// REMOVE THIS blueBoxDelays();

function blueBoxDelays() {
    var delay = 0;
    $('.fadeBlock').each(function(i) {
        $(this).delay(400 + delay).fadeIn(1000);
        delay = 200 * (i + 1);
    });
};

Answer 2

函数$('.fadeBlock').css('display', 'none');可能尚未执行

你可以把它放到$(function(){})结束再试一次：

$(function() {
    $('.fadeBlock').css('display', 'none');
    var oTop = $('.blue-box-container').offset().top - window.innerHeight;
    $(window).scroll(function() {
        var pTop = $('body').scrollTop();
        console.log(pTop + ' - ' + oTop);
        if (pTop > oTop) {
            blueBoxDelays();
        }
    });
});

当滚动点位于div顶部时，功能无法启动

2 个答案: