How to change right after scrolling on navbar

Navigation
0

Hi, I have a jquery plugin that I want to use. I have a jquery plugin that I want to use. : 

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

I have the html with the logo fixed on this navbar below: 

 <nav>
    <div id="logo" class="logo">
        <a href="#"><img src="img/logo-branco.png"></a>
    </div>

In case, every time you scroll down the same color in the navbar, change the logo to the logo that is in the location src="img / logo-dark.png"

    
asked by anonymous 25.02.2018 / 17:11

3 answers

0

Follow the script I used on one of my pages 

<script>
    $(window).scroll(function () {
        if ($(this).scrollTop() > 50) {
            $('.navbar').css("background-url", "dist/img/logo1.png")
        } else {
            $('.navbar').css("background-url", "dist/img/logo2.png")
        }
    });
</script>
    
25.02.2018 / 23:57
0

You need to use the correct selector on the line: 

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

The above selector is incorrect and will not select anything. The correct selector could be: 

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

div with id #logo that has the a tag and that has the img tag.

Or: 

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

div with id #logo that will search for img tags within itself.

    
25.02.2018 / 22:19
0

How about putting an id in the image 

<img id="image"....

and in the script 

$('#image').attr('src',.....

Example: 

$(window).on('scroll', function(){
    if($(window).scrollTop()){
        $('nav').addClass('color');
        $('#image').attr('src', 'http://1.bp.blogspot.com/-SAd3nVaqjlE/Tzci2PpZGLI/AAAAAAAAPx4/erFXdQl5MfY/s1600/facebook-wallpaper-celular-papeis+(16).gif');
    }else{
        $('nav').removeClass('color');
    }
})
#enchelinguissa{
height:1200px;
background:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><nav><divid="logo" class="logo">
        <a href="#"><img id="image" src="https://78.media.tumblr.com/avatar_5933d8570bff_128.pnj"></a></div><nav><divid="enchelinguissa">Essa div e o css não fazem parte da resposta.
 É só para dar scroll para testar o "executar"</div>
    
25.02.2018 / 23:08
Illegal use of < when > -style tag without < choose > its direct parent Error Login Facebook React Native