javascript - 使 Javascript 事件仅在滚动到时发生

Question

我目前有一个 JavaScript 在页面加载时创建小的弹出窗口。我想让它们仅在用户向下滚动到它们出现的位置(在照片上方)时出现。

这可能吗？

代码如下:

jQuery(function(){
// initialize of labels
$('.labels a#label1').fadeIn(100).effect('bounce', { times:3 }, 300, function() {
    $('.labels a#label2').fadeIn(100).effect('bounce', { times:3 }, 300, function() {
        $('.labels a#label3').fadeIn(100).effect('bounce', { times:3 }, 300, function() {
            $('.labels a#label4').fadeIn(100).effect('bounce', { times:3 }, 300, function() {
                $('.labels a#label6').fadeIn(100).effect('bounce', { times:3 }, 300, function() {
                    $('.labels a#label5').fadeIn(100).effect('bounce', { times:3 }, 300);
                });
            });
        });
    });
});

// dialog close
$('.dialog .close').click(function() {
    $(this).parent().fadeOut(500);
    return false;
});

// display dialog on click by labels
$('.labels a').click(function() {
    $('.dialog p').html( $(this).find('p').html() ).parent().fadeIn(500);
    return false;
});

// close dialog on click outside
$('.container').click(function() {
    $('.dialog').fadeOut(500);
});
});

Answer 1

查看此问题:How to animate this when scrolled

这是您要使用的基本代码:

<script>
$(window).scroll(function() {
    $('.labels').each(function(){
        var imagePos = $(this).offset().top;

        var topOfWindow = $(window).scrollTop();
        if (imagePos < topOfWindow + 400) {
            $(this).fadeIn(100).effect('bounce', { times:3 }, 300);
        }
    });
});
</script>

您还需要在页面加载时调用该函数来初始化任何可见的元素而无需滚动

上面问题中的 OP 链接到一个页面，其中包含许多您也可以使用的很酷的动画