我创建一个固定的标题,在加载时,徽标是平白色。在滚动时,它会变为全彩色徽标。 但是,当滚动回到顶部时,它会保持相同的彩色徽标,而不是返回白色。 这是代码(和笔)
$(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');
}
});
});
答案 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');
答案 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>