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

我尝试在滚动时替换页面标题中的徽标图像，并使用淡入淡出效果。它以正确的方式开始工作，图像替换也完成了，但是当你继续向下滚动网站时，新徽标继续褪色

这是我的密码：

$(document).ready(function(){
  $(window).scroll(function(){
    var scroll = $(window).scrollTop();
      if (scroll > 100) {
          $(".navbar-fixed-top").addClass("nav-scrolled");
          $('#logo').fadeOut('',function(){
                $(this).attr('src','Template/images/logo-scrolled.png').fadeIn();
            });
      }

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

你可以从中看到它

---

我怎样才能修复它？

编辑：对不起，我的错误-先思考，然后发布。；）每个滚动事件都会触发一个条件语句-现在，当达到滚动点时，它只会触发一次

您应该检查导航滚动类：

$(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();
            });
        }

    });
});

$（文档）.ready（函数（）{
变量$navbar=$（“.navbar固定顶部”），
$logo=$（“#logo”），
当前滚动；
$（窗口）.on（'scroll'，function（）{
currentScroll=$（窗口）.scrollTop（）；
如果（currentScroll>100&&！（$navbar.hasClass（'nav-scrolled'））{
$navbar.addClass（“导航滚动”）；
$logo.fadeOut（“”，function（）{
$（this.attr（'src'，'Template/images/logo scrolled.png'）.fadeIn（）；
});
}else if（currentScroll<100&&$navbar.hasClass（'nav-scrolled'））{
$navbar.removeClass（“导航滚动”）；
$logo.fadeOut（“”，function（）{
$（this.attr（'src'，'Template/images/logo.png'）.fadeIn（）；
});
}
});
});

在尝试淡入或淡出徽标之前，您可以检查徽标当前是否存在。我不确定您的意思我已更新了代码。它工作得几乎完美。现在淡入淡出结束，但从页面底部向上滚动时，初始图像不会显示。是的-图像不会通过向上滚动而再次淡入：只需更改：

$（this）.attr（'src'，'Template/images/logo.png'）

到

$（this.attr（'src'，'Template/images/logo.png'）.fadeIn（）