向下滚动页面时，我有一个脚本可以更改导航栏中的颜色。但是，我也需要在向下滚动时更改“ Logo ”类中的图像。
这是 Jquery 脚本:
<script type="text/javascript">
$(window).on('scroll', function(){
if($(window).scrollTop()){
$('nav').addClass('color');
//$('logo').attr('src', '/img/logo-dark.png');
}else{
$('nav').removeClass('color');
}
})
</script>
这是导航栏上带有 Logo 的下一行:
<body>
<nav>
<div id="logo" class="logo">
<a href="#"><img src="img/logo-branco.png"></a>
</div>
我需要更改为位于同一文件夹 img/logo-dark.png 中的图像“logo-dark.png”
这是 style.less:
nav.color{
background: rgb(255,255,255);
}
最佳答案
试试这个:
$(window).on('scroll', function(){
if($(window).scrollTop()){
$('.default-logo').hide();
$('.dark-logo').show();
}else{
$('.dark-logo').hide();
$('.default-logo').show();
}
}).default-logo{
display: none;
}
/* extra */
body{
height: 3000px;
padding: 30px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="logo" class="logo">
<a href="#">
<img class="default-logo" src="http://via.placeholder.com/100x100/ff0000/ffffff">
<img class="dark-logo" src="http://via.placeholder.com/100x100/999999/ffffff">
</a>
</div>jsfiddle 链接:https://jsfiddle.net/br18ohc9/10/
关于javascript - 滚动页面时如何添加新 Logo ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48976600/