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

Question

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

这是我的代码：

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

您可以在 www.ultramarinosvillena.com 中看到它 我该如何解决它？

Answer 1

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

您应该检查导航滚动的类：

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