使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

看看這個問題： 滾動時如何設置動畫

這是您要使用的基本代碼：

<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鏈接到包含很多很酷的動畫的頁面，您也可以使用它們