[BOOTSTRAP] Changement navbar-brand au scroll

Bonjour bonjour,

Je suis tout nouveau et j'espère passer des bons moments avec vous !

Alors j'ai un petit soucis, enfin plutôt une volonté sur un des sites que je suis en train de développer. Je viens donc vers vous afin que ma lanterne s'éclaire

Je m'explique, j'aimerais, via BOOTSTRAP, avoir deux logotypes dans ma nav-bar. (Navbar-brand)
Il y en aura du coup un "noir" et un "blanc". Et donc au scroll (au passage à la petite navbar) un switch automatique de l'image.

Je sais, c'est pas très claire, vu qu'une image vaut milles mots, voici un exemple concret :
https://www.lyft.com/
http://themenectar.com/demo/salient-frostwave/

Je pense que c'est peut-être un code JS permettant le changement de l'image au scoll ?
J'ai vraiment aucune piste..

Voici mon code actuel

	<header role="banner" id="fh5co-header">

			<div class="container">
				<!-- <div class="row"> -->

			    <nav class="navbar navbar-default">
		        <div class="navbar-header">
		        	<!-- Mobile Toggle Menu Button -->
					<a href="#" class="js-fh5co-nav-toggle fh5co-nav-toggle" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"><i></i></a>
		         <a class="navbar-brand" href="index.html"><img class="logo" src="Images/img00.svg"></a> 
		  
		        </div>
		        <div id="navbar" class="navbar-collapse collapse">
		          <ul class="nav navbar-nav navbar-right">
		            <li class="active"><a href="#" data-nav-section="home"><span>Accueil</span></a></li>
		            <li><a href="#" data-nav-section="services"><span>Nos prestations</span></a></li>
		            <li><a href="#" data-nav-section="testimonials"><span>Témoignages</span></a></li>
		            <li><a href="#" data-nav-section="contact"><span>Contact</span></a></li>
		          </ul>
		        </div>
			    </nav>
			  <!-- </div> -->
		  </div>
	</header>

Merci Beaucoup,
Bien à vous,
Nono
Modifié par Nono2style (24 Aug 2016 - 11:20)

Hello,

Pour ce genre de chose tu dois, en javascript, regarder le scroll.

$(window).scroll(function() {    
    var scroll = $(window).scrollTop();

    if (scroll >= 500) {
        $("header").addClass("active");
    } else {
        $("header").removeClass("active");
    }
});

Ensuite dans ton css, tu peux choisir de faire une de ces choses :
- Changer ton image via le script
- Si tu passes par CSS pour intégré ton image, la modifier simplement sur le sélecteur header.active

ou mieux :
- Utiliser les svg filters pour passer en niveau de gris et n'avoir qu'un seul fichier.
- Insérer ton svg dans ton HTML et jouer sur le fill color
Modifié par Yordi (20 Sep 2016 - 17:16)

Oui, tu as raison c'est pas forcement la meilleur technique...

Donc si j'ai bien compris, une fois que mon menu fixé au top apparait (navbar-fixed-top fh5co-animated slideInDown) , elle réagit a la lasse suivante ?

header.active 

Néanmoins, l'histoire du filtre ne me semble pas adapté, puisque mon logotype sera en blanc (et non en noir et blanc) quand il est pas fixé au top et en couleurs quand il est fixé au top.

Donc Logotype en blanc (sans scroll), et au scroll quand le menu fixé au top apparait, en couleurs.

Oui pour le header, c'est le script qui surveille le scroll qui ajoutera ou supprimera la class .active sur <header>.

Tu peux utiliser ce filtre pour mettre en blanc ton logo :

header.active .logo{filter: brightness(0) invert(1);}

Je viens d'essayer sans succès...

J'ai glissé ton code dans mon CSS, et non, sans succès.

A savoir que j'ai intégré mon svg dans une balise <img>