Questa tecnica efficace e potente è molto più facile da realizzare di quanto potresti aspettarti.

Nel web design, un'intestazione fissa è un potente strumento che migliora l'esperienza dell'utente e la navigazione. Mentre gli utenti scorrono verso il basso una pagina Web, un'intestazione fissa rimane visibile, garantendo che i collegamenti di navigazione essenziali siano sempre accessibili. Approfondiamo le complessità della creazione di un'intestazione fissa utilizzando i CSS.

A cosa serve un'intestazione fissa?

Un'intestazione fissa rimane in un punto della pagina Web, anche quando l'utente la scorre. Proprietà CSS specifiche, principalmente posizione: appiccicosa, ti aiuterà a ottenere questo comportamento. Alcuni vantaggi di avere un'intestazione fissa includono un'esperienza utente migliorata e una facile navigazione nel sito web.

  • Gli utenti possono accedere facilmente ai collegamenti di navigazione principali senza scorrere verso l'alto.
  • Il logo o il nome del marchio rimangono visibili, rafforzando l'identità del marchio.
    • instagram viewer
  • Un'intestazione fissa può risparmiare spazio rimuovendo la navigazione dalla barra laterale, lasciando più spazio per i contenuti.

Progettare l'intestazione: struttura HTML

Il fondamento di qualsiasi intestazione fissa è la sua struttura HTML. Ecco come creare gli elementi HTML necessari per la tua intestazione fissa.

<body>
<header>
<spanclass="logo">Company Logo 🏠span>
<nav>
<ul>
<li><ahref="#home">Homea>li>
<li><ahref="#about">Abouta>li>
<li><ahref="#services">Servicesa>li>
<li><ahref="#contact">Contacta>li>
ul>
nav>
header>
<mainid="home"><h1>Home pageh1>main>
<sectionid="about"><h1>Abouth1>section>
<sectionid="services"><h1>Servicesh1>section>
<sectionid="contact"><h1>Contacth1>section>
body>

Questa struttura utilizza un'intestazione che contiene il logo e un elemento nav con un elenco non ordinato di collegamenti di navigazione. Utilizza quindi un tag principale e diversi tag di sezione per rappresentare ciascuna sezione della pagina. Al momento la pagina si presenta così:

Gettare le basi con i CSS

Il codice CSS riportato di seguito utilizza proprietà del modello box come riempimento, margine e flexbox per creare un design accattivante, con un'altezza per ogni sezione segnaposto.

@import url("https://fonts.googleapis.com/css2?family=Quicksand: wght@600&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}


html { font-size: 62.5%; }


body { font-family: "Quicksand", sans-serif; }


main,
section { height: 100vh; }


.logo { font-size: 3rem; }


main,
header,
section {
display: flex;
align-items: center;
}


main { justify-content: center; }


header {
justify-content: space-between;
padding: 1rem 2rem;
background: #b2babb; 
}


navul {
display: flex;
column-gap: 2rem;
list-style: none;
}


a {
text-decoration: none;
font-size: 2rem;
color: #333;
}


section { justify-content: center; }


#home { background: #2c3e50; }


#about { background: #ccccff; }


#services { background: #f5b7b1; }


#contact { background: #40e0d0; }


h1 {
 font-size: 4rem;
 color: #fff;
}

La pagina ora dovrebbe assomigliare a questa:

Implementare l'effetto adesivo: CSS

Attualmente, quando scorri la pagina verso il basso, noterai che l'intestazione si sposta fuori dallo schermo. Per risolvere questo problema, utilizzare la proprietà posizione CSS e imposta l'intestazione su permanente.

Questa proprietà si comporta come una combinazione di posizionamento relativo e fisso, a seconda della posizione di scorrimento dell'utente.

header {
justify-content: space-between;
padding: 1rem 2rem;
position: sticky;
top: 0;
}

L'impostazione dell'intestazione su fissa garantisce che rimanga in una posizione sulla pagina indipendentemente dallo scorrimento. La proprietà top specifica dove deve essere posizionata l'intestazione della pagina. Ora, scorrendo verso il basso la pagina si ottiene:

Affrontare potenziali problemi di impilamento

A volte, altri elementi della pagina potrebbero sovrapporsi all'intestazione fissa. Per garantire che l'intestazione rimanga in primo piano, puoi aggiungere la proprietà z-index:

header {
justify-content: space-between;
padding: 1rem 2rem;
position: sticky;
top: 0;
z-index: 9999;
}

Infine, aggiungi la proprietà di scorrimento fluido all'elemento HTML per un'esperienza utente migliore:

html {
font-size: 62.5%;
scroll-behavior: smooth;
}

La pagina ora dovrebbe scorrere agevolmente tra le sezioni:

Elevare la navigazione Web con intestazioni permanenti CSS

L'aggiunta di un'intestazione fissa al design del tuo sito web può migliorare notevolmente l'esperienza dell'utente. Questa funzionalità mantiene gli utenti connessi al menu principale, mantiene un marchio coerente e conferisce al tuo sito web un aspetto moderno.

Con la potenza dei CSS, creare questo effetto è semplice ed efficace. Le tendenze del web design cambiano nel tempo, ma l'intestazione fissa è sempre utile per diversi settori.