Question

我正在处理一个galery，当用户滚动并到达拇指时，会发生某些背景动作。现在做了这个编码，我能够得到结果但不知何故我很困惑，因为它只工作一次然后当我再次滚动到那个位置它什么都不做。我正在使用警报框来达到第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);

    });

检查这个小提琴 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');
   }
});

滚动以达到Dom对象位置，然后执行某些操作

1 个答案: