僅當滾動到

Question

時，纔會發生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); 
}); 
}); 

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鏈接到一個頁面，您可以使用很多很酷的動畫