Crea un'intestazione di navigazione adesiva usando jQuery Waypoint

In questo tutorial, creeremo una barra di navigazione che rimarrà con te mentre scorri verso il basso e creeremo anche un espediente nel mix per eliminarlo.

introduzione

"Tutti amano i nastri" dice Chris Coyier quando parla delle virtù del :prima e :dopo pseudo-elementi. Ho visto questi nastri stilizzati a forma di triangolo spuntare su Internet (un esempio di spicco è la pagina Facebook di Introducing Timeline) e, mentre hanno un certo fascino, devo ammettere che l'effetto spaziale che creano non lo fa mi sembra giusto.

Tuttavia, i nastri sono stati apprezzati per una ragione - essi rompono il paradigma di design per lo più piatto a cui siamo tradizionalmente legati, e sono uno dei pochi elementi visivi a farlo in un modo poco appariscente. Ma, come recita l'antico detto, ci dovrebbe essere più di un modo per scuoiare un gatto - quindi, in questo tutorial, proporrò uno stile visivo alternativo per tali elementi, che trovo molto più naturale ed esteticamente piacevole. Spero che vi piaccia e ne faccia buon uso!

Cosa faremo

In questo tutorial, utilizzeremo uno dei nuovi elementi di HTML5, il nav tag, come contenitore per un elenco orizzontale di collegamenti. Spiegherò brevemente come renderlo carino usando un po 'di CSS.

Ancora più importante, ti familiarizzerai con le basi del plugin Waypoint di jQuery, che fornirà funzionalità avanzate: mentre l'utente scorre verso il basso, la barra di navigazione resterà nella parte superiore del viewport, oltre a cambiare per indicare la sezione corrente . Come un tocco in più, useremo un altro plugin, ScrollTo, per fornire uno scorrimento fluido e un posizionamento comodo quando l'utente fa clic sui collegamenti di navigazione.

Step 1: The Box

Sono sicuro che hai già familiarità con i vari nuovi elementi introdotti con HTML5. In questo esempio ne faremo uso due: