滚动时,徽标颜色会发生变化,但向上滚动会保持不变

时间:2017-03-16 14:34:56

标签: javascript jquery html css scroll

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

$(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

5 个答案:

答案 0 :(得分:1)

不需要添加点。在removeClass和addClass中的类名前面: 使用此:

navlogo.removeClass('nav-logo-before')

其次,您要删除首先用于获取元素的类。

我有一个更新的codepen,看看这是否符合您的需求:http://codepen.io/anon/pen/ZeaYRO

答案 1 :(得分:1)

这里有几件事情:

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

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>

答案 2 :(得分:0)

您正在使用

获取navlogo变量
var navlogo = $('.nav-logo-before');

然后你将类更改为'nav-logo-after',所以下次调用该函数时,你将无法使用jquery选择徽标,因为它不会有'.nav-logo -before'class了。

您可以在徽标中添加ID,并使用它来选择它,例如。

除此之外,removeClass('.nav-logo-before')应该是removeClass('nav-logo-before'),而不是类名之前的点。

答案 3 :(得分:0)

您正在移除类nav-logo-before,因此第二次运行该函数时,它找不到nav-logo-before的任何元素。

只需为您的navlogo元素提供第二个类,并在第3行使用它。 像这样:

var navlogo = $('.second-class');

工作示例: http://codepen.io/anon/pen/ryYajx

答案 4 :(得分:0)

问题是您删除nav-logo-before然后要选择具有此类的元素但它不存在。

我已经破坏了你的代码以避免它。

另一个问题是你在removeClass('.before')使用点,而它应该是removeClass('before') - 没有点

$(function() { 

    var navlogo = $('.nav-logo');
    
    $(window).scroll(function() {
        var scroll = $(window).scrollTop();
    
        if (scroll >= 1) {
            navlogo.removeClass('before').addClass('after');
            
        } else  {
            navlogo.removeClass('after').addClass('before');
        }
    });
});
body {
	background-color: rgba(0,0,0,.2);
}
.space {
	padding: 300px;
}
.before {
    content: url(https://image.ibb.co/kYANyv/logo_test_before.png)
}

.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 before">
</div>
<div class="space">
</div>