javascript - 滚动到一个 Dom 对象位置然后做一些事情

Question

我当时在做一个画廊，当用户滚动并到达拇指时，会发生特定的背景 Action 。现在做了这个编码，我能够得到结果但不知何故我感到困惑，因为它只工作一次然后当我再次滚动到那个位置时它什么都不做。我正在使用警告框到达第 5 个和第 7 个拇指，它只显示一次消息。我正在使用这样的东西

    $(document).ready(function () {


        // Thumb 1
        var thumb4Target = $("#myImg1").offset().top;
        var interval = setInterval(function () {
            if ($(window).scrollTop() >= thumb4Target) {
                alert('1nd Image Position Obtained');
                clearInterval(interval);
            }
        }, 0);

        //Thumb 2
        var thumb4Target2 = $("#myImg2").offset().top;

        var interval2 = setInterval(function () {
            if ($(window).scrollTop() >= thumb4Target2) {
                alert('2nd Image Position Obtained');
                clearInterval(interval2);
            }
        }, 0);

    });

检查这个 fiddle LINK

请告诉我哪里做错了。谢谢。

Answer 1

使用scroll事件而不是 interval。 LIVE DEMO 1或者 LIVE DEMO 2

$(window).scroll(function()
{
   var thumb4Target = $("#myImg1").offset().top; 
   var thumb4Target2 = $("#myImg2").offset().top;

   if ($(window).scrollTop() >= thumb4Target) {
       alert('1nd Image Position Obtained');
   }
   if ($(window).scrollTop() >= thumb4Target2) {
       alert('2nd Image Position Obtained');
   }
});