在用户滚动时停止徽标图像闪烁

Question

我有两个不同的徽标，我想平滑地淡入和淡出，根据滚动条的位置在它们之间切换。在我目前使用的代码中，它在图像之间切换，并应用淡入淡出效果，但当用户不断滚动时，它会继续这样做，从而产生闪烁效果。目前，我有以下代码：

$(window).on('scroll', function(){

     var headerHeight = $('header').outerHeight(true) / 3;    
     var scrollTop = $(this).scrollTop();
 
     if(scrollTop < headerHeight){

          $('.logo').fadeOut(200, function(){

               $('.logo').attr('src','IMG_URL01').fadeIn(200);

          });   

     }else if (scrollTop > headerHeight){

          $('.logo').fadeOut(200, function(){
              $('.logo').attr('src','IMG_URL02').fadeIn(200);
         
          });
};

根据代码的结构，我可以理解为什么它会产生闪烁效果；根据滚动条的位置，用户每次滚动时都会应用if语句。但是，我只是不知道该写什么，也不知道在哪里写才能只应用一次if语句。

Answer 1

如果在每个进程执行时设置一个布尔标志，使得布尔值在执行前必须为false，并在执行时变为true，那么您也可以在If语句中进行检查，强制它在滚动范围内只触发一次。

每个进程都会重置另一个进程的布尔值，因此当用户再次返回到该滚动范围时，可以再次启动另一个进程。

var img1IsFadedIn = false;
var img2IsFadedIn = false;

$(window).on('scroll', function(){

    var headerHeight = $('header').outerHeight(true) / 3;    
    var scrollTop = $(this).scrollTop();

    if(scrollTop < headerHeight && img1IsFadedIn == false){
        img1IsFadedIn = true;
        img2IsFadedIn = false;
        $('.logo').fadeOut(200, function(){
            $('.logo').attr('src','IMG_URL01').fadeIn(200);
        });   

    }else if (scrollTop > headerHeight && img2IsFadedIn == false){
        img2IsFadedIn = true;
        img1IsFadedIn = false;
        $('.logo').fadeOut(200, function(){
            $('.logo').attr('src','IMG_URL02').fadeIn(200);
        });
    }

});