使用 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

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

您应该检查滚动的导航 class:

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

    });
});

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

Fade repeating after replacing image while scrolling with javascript

javascript

scroll

transition