Una navbar sticky è un elemento essenziale per migliorare la navigazione e l'esperienza utente di un sito web. In questa guida, vedremo come creare una barra di navigazione che rimane fissata nella parte superiore della pagina quando l'utente scorre verso il basso. Inoltre, aggiungeremo un effetto visivo che cambia il colore della navbar al passaggio dello scroll, migliorando la leggibilità e il design del sito. Utilizzeremo HTML, CSS e JavaScript per realizzare questa funzionalità in modo semplice ed efficace. Seguendo questi passaggi, potrai implementare facilmente una navbar moderna e dinamica per i tuoi progetti web.
Creazione di una navbar sticky durante la navigazione
L'effetto di una navbar sticky con cambio colore allo scroll è ormai molto comune nei siti web moderni. Soprattutto in pagine con design puliti e intuitivi. Questo tipo di interazione non solo migliora l'estetica del sito, ma aiuta anche l'utente a orientarsi meglio durante la navigazione. Inoltre è altamente personalizzabile. Puoi modificare colori, transizioni e comportamenti in base alle esigenze del tuo progetto.
Per realizzarlo, utilizzeremo i tre linguaggi principali della programmazione web, ovvero HTML per la struttura, CSS per lo stile e JavaScript per gestire il cambio di colore in base allo scroll della pagina.
Il risultato che otterremo è composto da una navbar contenente un menu di navigazione che ci indica un utilizzo mirato alla creazione dell'elemento header all'interno di un sito web. Questa navbar avrà un colore iniziale che cambierà non appena l'utente scorre la pagina; inoltre l'elemento rimarrà fisso nella parte alta della pagina per permettere una facile ed immediata interazione da parte dell'utente.
Il codice HTML
Iniziando dal codice HTML, dopo le varie proprietà che costituiscono la parte dell'<head> troviamo la sezione <body> con il contenuto della pagina:
<body>
<!-- Navbar -->
<nav class="navbar" id="navbar">
<div class="logo">LOGO</div>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Chi Siamo</a></li>
<li><a href="#">Servizi</a></li>
<li><a href="#">Contatti</a></li>
</ul>
</nav>
<!-- Contenuto della pagina -->
<div class="content">
<h1>Benvenuto nel nostro sito</h1>
<p>Scorri verso il basso per vedere l'effetto della navbar.</p>
</div>
</body>La struttura HTML sopra mostrata è semplice e ben organizzata. All'interno del <body>
<ul>
id="navbar"
JavaScript
<div class="content">
Il codice CSS
Adesso è il momento di gestire lo stile con il CSS:
.navbar {
position: fixed;
top: 0;
left: 0;
width: 100%;
padding: 15px 20px;
background-color: #333;
color: white;
display: flex;
justify-content: space-between;
align-items: center;
transition: background-color 0.3s ease;
}
.navbar ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
}
.navbar ul li {
margin: 0 15px;
}
.navbar ul li a {
color: white;
text-decoration: none;
font-weight: bold;
}
.scrolled {
background-color: #007bff;
}
.content {
height: 1500px;
padding: 100px 20px;
font-size: 18px;
}Lo stile CSS definisce l'aspetto della navbar e l'effetto sticky. In particolare:
- la classe
.navbarposition: fixed; - Il colore di sfondo iniziale è scuro (
#333 - La transizione
background-color 0.3s ease - La classe
.scrolled#007bff - Infine
.content1500px
Cambio di colore della navbar in base allo scroll
Per concludere, aggiungiamo il comportamento della navbar per garantire che essa cambi colore allo scorrimento della pagina dopo che rimane fissa in alto. Per fare ciò utilizziamo Javascript:
const navbar = document.getElementById("navbar");
window.addEventListener("scroll", function () {
if (window.scrollY > 50) {
navbar.classList.add("scrolled");
} else {
navbar.classList.remove("scrolled");
}
});Questo script gestisce il cambio di colore della navbar in base allo scroll. Il suo funzionamento può essere riassunto in questi brevi step:
- selezioniamo la navbar con
document.getElementById("navbar") - Aggiungiamo un
eventListenerscrollwindow.scrollY - Se l'utente ha scorso più di
50px.scrolled (classList.add("scrolled")) - Se l'utente torna in alto, la classe viene rimossa (
classList.remove("scrolled")
Il risultato finale che si ottiene dopo la combinazione del codice sopra mostrato è il seguente:
Si può notare come sia possibile ottenere una navbar moderna e dinamica che rimane sempre visibile in alto mentre scorri la pagina. Inizialmente la navbar ha uno sfondo scuro ma quando l'utente scorre oltre i 50px il colore di sfondo cambia in blu creando un effetto visivo accattivante e migliorando la leggibilità. Grazie a una transizione fluida, il passaggio di colore risulta elegante e professionale.
Considerazioni finali e conclusione
Implementare una navbar sticky con cambio colore allo scroll è un modo semplice ma efficace per migliorare l'usabilità e l'aspetto estetico di un sito web. Questo effetto non solo rende la navigazione più intuitiva ma aiuta anche a creare un'esperienza più coinvolgente per gli utenti. Con pochi aggiustamenti di stile e script puoi personalizzare ulteriormente il comportamento della navbar per adattarlo perfettamente alle esigenze del tuo progetto. Ora che hai visto come funziona, puoi sperimentare con colori, transizioni e altre animazioni per rendere il tuo design ancora più accattivante!
