滚动页面时如何添加新徽标

Question

向下滚动页面时，我有一个脚本可以在导航栏中更改颜色。 但是，当向下滚动时，我也需要在“徽标”类中更改图像。

这是脚本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>

这是导航栏上带有徽标的下一行：

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

Answer 1

尝试这个：

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

Answer 2

你的

$('logo').attr('src', '/img/logo-dark.png');

是一个好的开始。 但是您的选择器是错误的。

$('.logo img').attr('src', '/img/logo-dark.png');

滚动页面时如何添加新徽标

问题描述

2 个解决方案

解决方案1
1 已采纳 2018-02-25 18:12:04

解决方案2
1 2018-02-25 18:21:15

滚动页面时如何添加新徽标

问题描述

2 个解决方案

解决方案1 1 已采纳 2018-02-25 18:12:04

解决方案2 1 2018-02-25 18:21:15

解决方案1
1 已采纳 2018-02-25 18:12:04

解决方案2
1 2018-02-25 18:21:15