RISOLTO [Javascript] Cambiare icona navbar mentre scrolli

[Utente 399201]

Ho questa barra di navigazione dove c'è l'immagine con il nome del negozio.
Quello che avevo intenzione di fare è che mentre scrolli, e la barra cambia dimensione, al posto dell'immagine bianca c'è l'immagine nera.
Esiste qualche funzione in Javascript che permette di farlo?


Codice

      <nav class="navbar navbar-expand-lg navbar-dark ftco_navbar bg-dark ftco-navbar-light" id="ftco-navbar">
        <div class="container">
          <a class="navbar-brand" href="index.html"><img id="logoRistorante" src="images/logowt.png" alt="Portichetto di Manzone Eugenio &amp; C."></a>
          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#ftco-nav" aria-controls="ftco-nav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="oi oi-menu"></span> Menu
          </button>

          <div class="collapse navbar-collapse" id="ftco-nav">
            <ul class="navbar-nav ml-auto">
                <li class="nav-item"><a href="index.html" class="nav-link">Il ristorante e lo chef</a></li>
                <li class="nav-item"><a href="index.html" class="nav-link">I Piatti</a></li>
                <li class="nav-item"><a href="index.html" class="nav-link">Servizio Catering</a></li>
                <li class="nav-item"><a href="index.html" class="nav-link">I Premi</a></li>
              <li class="nav-item"><a href="index.html" class="nav-link">Contatti</a></li>
            </ul>
          </div>
        </div>
      </nav>

Prima:


Dopo:

 

[Moffetta88]

Che versione di bootstrap stai usando la 4 o la 5?

<script>
    window.onscroll = function(){

   if(window.scrollY >= 50) {
      document.getElementById("logo").src="img1.png";
   }else {
      document.getElementById("logo").src="img2.png";
    }

};
</script>

Questo in javascript vanilla..
Giochi poi con lo scrollY in base a quanto hai bisogno

 

[Utente 399201]

Sto usando Bootstrap 4.
Ora provo

Post unito automaticamente: 22 Ottobre 2021

Che versione di bootstrap stai usando la 4 o la 5?

<script>
    window.onscroll = function(){

   if(window.scrollY >= 50) {
      document.getElementById("logo").src="img1.png";
   }else {
      document.getElementById("logo").src="img2.png";
    }

};
</script>

Questo in javascript vanilla..
Giochi poi con lo scrollY in base a quanto hai bisogno

Funziona, grazie mille!

 

[Moffetta88]

Certo che funziona xD
mica ti scrivo codice a caso xD
Ottimo ^__^