Come creare un'intestazione di un sito Web appiccicosa

Le intestazioni di siti Web che rimangono al loro posto quando un utente scorre sono diventate un elemento di design molto popolare. Consentono all'utente di accedere facilmente alla navigazione senza la necessità di scorrere verso l'alto ogni volta che desidera scegliere una pagina o un'opzione diversa.

Gli elementi con questa funzionalità sono spesso chiamati "appiccicosi" perché si attaccano e rimangono visibili mentre l'utente si sposta attraverso il sito web. Quando un utente arriva per la prima volta al sito Web, gli elementi saranno nella posizione iniziale, ma l'intestazione adesiva rimarrà nella stessa posizione.

Poiché la navigazione è uno degli elementi più importanti di un sito Web, adottare questo approccio aiuta a rendere la navigazione più accessibile. Avere una navigazione che rimane sul posto consente un flusso facile per l'utente mentre si sposta attraverso il contenuto del sito Web, il che è estremamente importante.

"Gli elementi di navigazione persistenti aiutano a creare un flusso di utenti facile mentre le persone si spostano attraverso il tuo sito web. "

Cosa lo rende appiccicoso?

Il posizionamento fisso è un componente chiave per mantenere la navigazione sul posto. Questo elemento di posizione fissa è posizionato rispetto alla finestra o alla finestra del browser stessa. Poiché il viewport non cambia quando si scorre il sito, questo elemento posizionato fisso rimarrà nella stessa posizione quando si scorre la pagina.

Nota: non provarlo sul tuo sito live

Ricorda: non dovresti mai modificare il codice direttamente sul tuo sito, per assicurarti che nulla si rompa. La nostra app di sviluppo locale gratuita, Local, ti aiuterà a configurare un ambiente di test in cui puoi seguire in sicurezza questo tutorial.

Come facciamo in modo che la navigazione rimanga in un posto?

Rendere la navigazione appiccicosa non potrebbe essere più semplice; è appena fatto con lo stile CSS. Sostanzialmente assomiglia a questo:

.navbar-fixed-top {

position: fixed;

right: 0;

left: 0;

z-index: 999;

}

Non importa quanto sia lunga la tua pagina o quante volte scorri su e giù, il nav sarà "bloccato" nella parte superiore della pagina. Una classe denominata .navbar-fixed-top è stata aggiunta alla navigazione che crea il posizionamento per la navigazione. Ho aggiunto questa classe al tag nav. La posizione è impostata su fissa e l'aggiunta del posizionamento sinistro e destro assicura che il posizionamento sia corretto e occupi l'intera larghezza della pagina.
Tieni presente che ogni volta che questa classe viene applicata, creerà la posizione fissa dell'elemento. Molto probabilmente questa classe verrà applicata solo una volta, altrimenti ci sarebbero più elementi di pagina che si comportano allo stesso modo nello stesso punto, creando un pasticcio confuso.

Un'altra considerazione importante è lo z-index. Poiché vogliamo che la navigazione sia sempre visibile, dobbiamo assicurarci che non si sovrapponga ad altri elementi. Quando facciamo riferimento a z-index , stiamo parlando della proprietà CSS che imposta l'ordine di stack di elementi specifici. Un elemento con un ordine di stack maggiore è sempre davanti a un altro elemento con un ordine di stack inferiore. Un valore di 999 è un numero grande, il che lo rende una scommessa sicura per la navigazione.

Regola il corpo della pagina

Poiché la navigazione è ora in una posizione fissa, coprirà parte del contenuto in alto. C'è una soluzione semplice per questo. L'aggiunta di spaziatura interna alla parte superiore del corpo spingerà la pagina verso il basso in modo che il contenuto nella parte superiore non sarà coperto dall'intestazione quando l'utente arriva sulla pagina.
Puoi aggiungere spaziatura interna al corpo nel tuo file CSS:

body {

padding-top: 75px;

}

Tieni presente che il tuo padding potrebbe essere più grande o più piccolo a seconda di quanto è spessa l'intestazione fissa.

Rendere squishy l'intestazione appiccicosa

È comune trovare un'intestazione che diventa più sottile quando un utente scorre oltre un certo punto, facendola sembrare morbida. Quando la dimensione della navigazione diminuisce, aiuta a dare all'utente più spazio per vedere il contenuto principale del sito web. Ciò è particolarmente utile sui dispositivi più piccoli. Utilizzeremo una combinazione di CSS e JavaScript per fare in modo che ciò accada.

Navigazione morbida con lo script AnimatedHeader

Per aggiungere un'intestazione animata che cambierà le sue dimensioni durante lo scorrimento, c'è un'ottima soluzione leggera per rendere la navigazione squishy. Si chiama AnimatedHeader. Ha una licenza MIT, quindi può essere utilizzato per progetti personali o commerciali. Per ottenere questi file, controlla AnimatedHeader su GitHub.

CSS di base per la navigazione

Diamo un'occhiata a due importanti stili CSS. Il primo probabilmente ti sembra familiare, .navbar-fixed-top che specifica la nostra altezza, larghezza e posizione fissa per la navigazione appiccicosa. Di seguito, puoi vedere che è stata aggiunta un'altra classe che specifica un'altezza di 75px. Questa è la dimensione "schiacciata".

.navbar-fixed-top {
position: fixed;
top: 0;
left: 0;
width: 100%;
background: #f6f6f6;
z-index: 999;
height: 90px;
overflow: hidden;
-webkit-transition: height 0.3s;
-moz-transition: height 0.3s;
transition: height 0.3s;
}

.navbar-fixed-top.cbp-af-header-shrink {
height: 75px;
}

Per modificare la dimensione, JavaScript viene utilizzato per aggiungere la classe di .cpb-af-header-shrink . Diamo un'occhiata alla parte dello script che fa sì che ciò accada:

function scrollPage() {
var sy = scrollY();
if ( sy >= changeHeaderOn ) {
classie.add( header, 'cbp-af-header-shrink' );
}
else {
classie.remove( header, 'cbp-af-header-shrink' );
}
didScroll = false;
}

Solo un promemoria, c'è di più nello script, quindi assicurati di scaricare il codice sorgente in modo da avere tutti i componenti. Come puoi vedere, dopo che un utente scorre oltre un certo punto, viene aggiunta la classe di .cpb-af-header-shrink . Se l'utente esegue il backup della pagina, questa classe viene rimossa.

L'opzione di posizionamento appiccicoso CSS

C'è anche un'opzione che potrebbe essere meno fastidiosa. A seconda del supporto del browser per cui stai progettando, position: sticky; rende molto semplice la creazione di un'intestazione adesiva. Il supporto del browser non è terribile, ma non è nemmeno completamente globale. Quando hai dichiarato sticky, è possibile utilizzare i prefissi. Dai un'occhiata a Posso usare per maggiori dettagli.

Un modo semplice per descrivere il posizionamento appiccicoso è che è una combinazione di posizionamento relativo e fisso. Immagino che ti imbatti un po 'in un posizionamento appiccicoso. Stiamo parlando di intestazioni qui, ma è anche utile per qualsiasi elemento dell'interfaccia utente che desideri essere "appiccicoso" mentre gli utenti scorrono. Vedono che rimane "bloccato" quando l'elemento raggiunge una distanza specifica dal bordo della finestra.

L'elemento viene trattato come relativo posizionato finché non raggiunge un certo punto e quindi viene "fissato". Questo punto viene dichiarato utilizzando CSS. Il "punto" è fondamentalmente quando specifichi in alto, in basso, a sinistra oa destra, come faresti con il posizionamento assoluto. Devi specificare in modo che l'elemento abbia qualcosa a cui "attaccarsi".

Posizione d'uso: appiccicosa

È abbastanza semplice da usare. Alcune dichiarazioni CSS e sono stato in grado di avere un'intestazione appiccicosa. Ecco tre semplici passaggi:

1. Trova lo stile corretto in modo da poter dichiarare l'elemento come appiccicoso usando position:sticky; (non dimenticare i prefissi del browser come position: -webkit-sticky; ).
2. Scegli il "bordo adesivo" (in alto, a destra, in basso o a sinistra) su cui "attaccare" l'elemento.
3. Dichiara la distanza dal "bordo appiccicoso", ovvero 10px per un'intestazione che diventa appiccicosa quando si trova a 10px di distanza dall'area di scorrimento.

.navbar-fixed-top {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}

Non volevo spazio tra l'intestazione adesiva e il viewport, quindi sono 0 pixel dall'alto. Puoi vedere questo esempio su Codepen.

Situazioni di overflow appiccicose di cui essere consapevoli

Compatibilità di overflow

È fantastico, ma non è perfetto. Ci sono alcune limitazioni. L'overflow a volte può essere un po' imprevedibile. È meglio evitare alcuni tipi di overflow su un elemento padre con qualcosa che necessita di position: sticky . Potrebbero esserci problemi con l'overflow automatico, lo scorrimento o nascosto.

Supporto browser limitato

Il supporto del browser è limitato, quindi l'utilizzo della regola di supports per rilevare se il browser corrente supporta il posizionamento permanente è un'opzione. Sembra:

@supports(position:sticky){
  .header{
    position: -webkit-sticky;
    position: sticky;
    top: 0;
  }
}

È importante pensare se il posizionamento appiccicoso è assolutamente necessario. In tal caso, è possibile utilizzare l'approccio di posizionamento fisso. Se non è assolutamente necessario o se il supporto del browser non è un problema, l'approccio appiccicoso è più facile da implementare.

All'inizio può sembrare complesso, ma non c'è motivo di rimanere bloccati in una routine di navigazione; è relativamente semplice rendere la navigazione appiccicosa e soffice. Con un semplice posizionamento fisso CSS, puoi facilmente creare un'intestazione di sito Web appiccicosa. Con un semplice JavaScript, la navigazione fissa può essere migliorata schiacciando fino a un'altezza ridotta, offrendo agli utenti più spazio per visualizzare i contenuti del sito web.

Non provarlo sul tuo sito live

Crea un'intestazione di sito Web appiccicosa mentre il tuo sito è su Local! Scopri di più e scaricalo gratuitamente qui!

Questo articolo è stato originariamente pubblicato il 2 febbraio 2016. È stato aggiornato l'ultima volta il 14 ottobre 2018.