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

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

如果您在每个进程执行时设置一个布尔标志，这样布尔值在执行前必须为假并在执行时变为真，那么您也可以在 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);
        });
    }

});

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

Stop logo image from flickering as user scrolls

jquery

scroll

if-statement

fadeout

fadein