使用javascript滚动替换图片时重复后淡出

Question

我试图在滚动时使用淡入淡出效果替换页面标题中的徽标图像。它以正确的方式开始工作，图像替换完成，但在继续向下滚动网站时，新徽标将继续消失。

这里是我的代码：

​​

你可以看到它在www.ultramarinosvillena.com 我怎么能解决这个问题？

Answer 1

编辑：对不起，我的错误 - 首先想着然后张贴。 ;）其中一个条件语句是由每个滚动事件触发的 - 现在只有在滚动点到达时才会触发一次。

您应该检查NAV-滚动类：

$(document).ready(function(){ 

    var $navbar = $(".navbar-fixed-top"), 
     $logo = $("#logo"), 
     currentScroll; 

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

     currentScroll = $(window).scrollTop(); 

     if (currentScroll > 100 && !($navbar.hasClass('nav-scrolled'))) { 

      $navbar.addClass("nav-scrolled"); 
      $logo.fadeOut('',function(){ 
       $(this).attr('src','Template/images/logo-scrolled.png').fadeIn(); 
      }); 

     } else if (currentScroll < 100 && $navbar.hasClass('nav-scrolled')) { 

      $navbar.removeClass("nav-scrolled"); 
      $logo.fadeOut('',function(){ 
       $(this).attr('src','Template/images/logo.png').fadeIn(); 
      }); 
     } 

    }); 
});