How to change IMG (logo) from the menu (header) when scrolling page?

Navigation
4

I have this menu that has an image: logo.png, as shown in the code below 

<header  class="header">
    <div class="container">
        <a href="index.html" class="grid-4">
            <img  src="img/logo.png">
        </a>
        <nav class="grid-12  menu header_menu">
            <ul>
                <li> <a href="index.html">Home</a> </li>
                <li> <a href="sobre.html">Sobre</a> </li>
                <li> <a href="portfolio.html">Portfólio</a> </li>
                <li> <a href="contato.html">Contato</a> </li>
            </ul>
        </nav>  
    </div>
</header>

I have another image named logo2.png, how do I exchange one image for another when I scroll the page?

I already have the javascript code that also changes the background color of the header from black to white when I scroll the page.

    
asked by anonymous 10.01.2017 / 01:09

1 answer

1

You can do this by using $(window).scroll and swapping the image with .attr . See: 

jQuery("document").ready(function($){
	    	
	$(window).scroll(function () {
		if ($(this).scrollTop() > 50) {
			$("#imagem").attr("src", "http://www.completaweb.com.br/images/logo/logo-html5.png");
		} else {
			$("#imagem").attr("src", "http://susilsingh.com.np/img/skills/css3_logo.png");
		}      
	});

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><headerclass="header">
    <div class="container">
        <a href="index.html" class="grid-4">
            <img height="300" width="300" id="imagem"  src="http://susilsingh.com.np/img/skills/css3_logo.png"></a><navclass="grid-12  menu header_menu">
            <ul>
                <li> <a href="index.html">Home</a> </li>
                <li> <a href="sobre.html">Sobre</a> </li>
                <li> <a href="portfolio.html">Portfólio</a> </li>
                <li> <a href="contato.html">Contato</a> </li>
            </ul>
        </nav>  
    </div>
</header>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec at dignissim erat. Cras vulputate finibus sollicitudin. Duis id risus pretium, aliquet dolor in, auctor nibh. Nunc nunc urna, tincidunt eu lacus vitae, rhoncus convallis nibh. Sed ut odio justo. Proin luctus commodo mi, ut maximus tellus blandit at. Vivamus vitae dui euismod, suscipit risus sit amet, porttitor urna. Pellentesque eget pellentesque erat, eu tincidunt est. Vestibulum nunc erat, dictum vitae erat vitae, pretium pharetra diam. In fringilla, tortor quis lacinia finibus, lacus leo viverra felis, ac condimentum ipsum sapien vitae eros. Nulla facilisi.</p>
<p>space</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec at dignissim erat. Cras vulputate finibus sollicitudin. Duis id risus pretium, aliquet dolor in, auctor nibh. Nunc nunc urna, tincidunt eu lacus vitae, rhoncus convallis nibh. Sed ut odio justo. Proin luctus commodo mi, ut maximus tellus blandit at. Vivamus vitae dui euismod, suscipit risus sit amet, porttitor urna. Pellentesque eget pellentesque erat, eu tincidunt est. Vestibulum nunc erat, dictum vitae erat vitae, pretium pharetra diam. In fringilla, tortor quis lacinia finibus, lacus leo viverra felis, ac condimentum ipsum sapien vitae eros. Nulla facilisi.</p>
<p>space</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec at dignissim erat. Cras vulputate finibus sollicitudin. Duis id risus pretium, aliquet dolor in, auctor nibh. Nunc nunc urna, tincidunt eu lacus vitae, rhoncus convallis nibh. Sed ut odio justo. Proin luctus commodo mi, ut maximus tellus blandit at. Vivamus vitae dui euismod, suscipit risus sit amet, porttitor urna. Pellentesque eget pellentesque erat, eu tincidunt est. Vestibulum nunc erat, dictum vitae erat vitae, pretium pharetra diam. In fringilla, tortor quis lacinia finibus, lacus leo viverra felis, ac condimentum ipsum sapien vitae eros. Nulla facilisi.</p>
<p>space</p>

<p>space</p>
<p>space</p>
<p>space</p>
<p>space</p>
    
10.01.2017 / 02:44
How to determine users stories? Create txt with default printer name in VBS