javascript - 滚动时， Logo 颜色发生变化，但向上滚动时它保持不变

Question

我创建了一个固定的标题，在加载时， Logo 是纯白色的。在滚动时，它变为全彩色 Logo 。 但是，当滚动回顶部时，它会保持相同颜色的 Logo ，而不是返回到白色。 这是代码(和一支笔)

$(function() {
$(window).scroll(function() {    
    var navlogo = $('.nav-logo-before');
    var scroll = $(window).scrollTop();

    if (scroll >= 1) {
        navlogo.removeClass('.nav-logo-before').addClass('nav-logo-after');

    } else  {
        navlogo.removeClass('.nav-logo-after').addClass('nav-logo-before');            
    }

});

});

http://codepen.io/bradpaulp/pen/gmXOjG

Answer 1

这里有几件事:

1) 您从 .nav-logo-before 类开始，但是当 Logo 变为黑色时，您删除该类，然后尝试使用不再存在的类选择器获取相同的元素

2) removeClass('.nav-logo-before') 与 removeClass('nev-logo-before) 不同，注意“.”在第一个选择器中。

3) 在每个滚动事件中使用 $('.selector') 获取元素，这可能是一个性能问题，最好在页面加载时缓存它们，然后使用该元素存储在内存中

4) 监听滚动事件不是一个好的做法，因为这对性能要求太高，通常最好使用 requestAnimationFrame 然后检查滚动位置是否已更改。使用滚动事件可能会发生你向上滚动得非常快并且滚动事件不会发生在 0，所以你的标志不会改变。使用 requestAnimationFrame 这不可能发生

$(function() {
    var navlogo = $('.nav-logo');
    var $window = $(window);
    var oldScroll = 0;
    function loop() { 
        var scroll = $window.scrollTop();
        if (oldScroll != scroll) {
            oldScroll = scroll;
            if (scroll >= 1) {
                navlogo.removeClass('nav-logo-before').addClass('nav-logo-after');
            } else  {
                navlogo.removeClass('nav-logo-after').addClass('nav-logo-before');      
            }
        }
        requestAnimationFrame(loop);
    }
    requestAnimationFrame(loop);
});

body {
	background-color: rgba(0,0,0,.2);
}
.space {
	padding: 300px;
}
.nav-logo-before {
    content: url(https://image.ibb.co/kYANyv/logo_test_before.png)
}

.nav-logo-after {
    content: url(https://image.ibb.co/jYzFJv/logo_test_after.png)
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
	<img class="nav-logo nav-logo-before">
</div>
<div class="space">
</div>