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

Asked

Viewed 1,384 times

4

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

<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 the other when scrolling the page?

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

javascript jquery html5 css3

  • Add a id in your <img> and if you have made a condition try to put that line inside if - $("#minhaImagem").attr("src", "logo2.jpg"); see if it works

  • it worked @Nathan, thank you very much, had already searched all the different forms, it served me perfectly.

1 answer

1


You can do this way by using $(window).scroll and exchanging the image with .attr. Behold:

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>

<header  class="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>
        <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>

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

Browser other questions tagged javascript jquery html5 css3

You are not signed in. Login or sign up in order to post.