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

我现在有一个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);
});
});

看看这个问题：

以下是您要使用的基本代码：

<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>

$（窗口）。滚动（函数（）{
$（'.labels'）。每个（函数（）{
var imagePos=$（this）.offset（）.top；
var topOfWindow=$（window.scrollTop（）；
if（图像位置

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

---

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

我建议您研究一些类似scrollspy（附带引导）的东西来实现这一点。