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链接到一个页面，其中包含许多很酷的动画，你也可以使用

只有在滚动到时才会发生Javascript事件

1 个答案: