FadeIn＆fadeOut在窗口滚动后多次发生

Question

我试图更改徽标图像src（如果不是）窗口scrollTop并向后显示淡入淡出效果，但即使您滚动一次，淡入&输出会多次发生。

我想出了与console.log即使你滚动一次（鼠标滚轮或箭头），它会记录多次消息（如8,10或15次）。这意味着徽标在将src更改为其他图像之前总是闪烁10次以上。

的jQuery：

$(window).scroll(function() { 
    if ($(window).scrollTop()) { 
     $.when($('#navbar').css('padding', '0px')).done(function() { 
      $('.logo img').fadeOut(400, function() { 
       $('.logo img').attr('src', 'images/small-logo.png'); 
       console.log('bot'); 
      }).fadeIn(); 
     }); 
    } else { 
     $.when($('#navbar').css('padding', '20px 0px')).done(function() { 
      $('.logo img').fadeOut(400, function() { 
       $('.logo img').attr('src', 'images/top-logo.png'); 
       console.log('top'); 
      }).fadeIn(); 
     }); 
    } 
}); 

HTML：

<div class="col-lg-12"> 
    <div class="col-lg-3 logo no-padding-left"> 
     <a href="index.php"> 
     <img src="images/logo.png"/> 
     </a> 
    </div> 
    <div class="col-lg-9 no-padding-right"> 
     <div class="navbar-header"> 
     <div id="navbar" class="navbar-collapse collapse"> 
      <ul class="nav navbar-nav"> 
       . 
       . 
       . 
      </ul> 
     </div> 
    </div> 
    </div> 
</div> 

我发现并试图很多解决方案（如.stop()，如果动画等），但似乎没有什么工作对我来说我不知道为什么。

预先感谢您。

Answer 1

该问题可以通过使用检查页面是否滚动到顶部的标志来解决。

你只需要改变你的JS代码：

$isScrolledToTop = false; 

$(window).scroll(function() { 
    if ($(window).scrollTop()){ 
     if($isScrolledToTop == false) { 
      $.when($('#navbar').css('padding', '0px')).done(function() { 
       $('.logo img').fadeOut(400, function() { 
        $('.logo img').attr('src', 'images/small-logo.png'); 
        console.log('bot'); 
       }).fadeIn(); 
      }); 
      $isScrolledToTop = true; 
     } 
    } else { 
     if($isScrolledToTop == true){ 
      $.when($('#navbar').css('padding', '20px 0px')).done(function() { 
       $('.logo img').fadeOut(400, function() { 
        $('.logo img').attr('src', 'images/small-logo.png'); 
        console.log('top'); 
       }).fadeIn(); 
      }); 
      $isScrolledToTop = false; 
     } 
    } 
}); 

这样，你只有在两种情况下进行图像变化：

• 您从页面的顶部移开
• 您回到页面顶部

试试吧，它应该工作！

再见

Answer 2

如果您在短时间内制作出更多滚动事件来开始动画之前该怎么办？

var animationTimeout; 
var isAtTop = true; 
$(window).scroll(function() { 
     if ($(window).scrollTop()) { 
     $.when($('#navbar').css('padding', '0px')).done(function() { 
      if (isAtTop) { 
       if (animationTimeout) clearTimeout(animationTimeout); 

       animationTimeout = setTimeout(function() { 
        $('.logo img').fadeOut(400, function() { 
         $('.logo img').attr('src', 'images/small-logo.png'); 
         console.log('bot'); 
        }).fadeIn(); 
       } 
       , 100); 
      }); 
      isAtTop = false; 
     } 
    } else { 
     $.when($('#navbar').css('padding', '20px 0px')).done(function() { 
      if (!isAtTop) { 
       if (animationTimeout) clearTimeout(animationTimeout); 

       animationTimeout = setTimeout(function() { 
        $('.logo img').fadeOut(400, function() { 
         $('.logo img').attr('src', 'images/top-logo.png'); 
         console.log('top'); 
        }).fadeIn(); 
       }, 
       100); 
      }); 
      isAtTop = true; 
     } 
    }