Creați o antet de navigare Sticky Utilizând jQuery Waypoints

În acest tutorial, vom crea o bară de navigare care să rămână cu dvs. pe măsură ce vă defilați în jos - și vom arunca, de asemenea, un gimmick sau două în amestec pentru ao lustrui.

Introducere

"Toată lumea iubește panglicile", spune Chris Coyier atunci când discută despre virtuțile lui :inainte de și :după -elemente pseudo. Am văzut aceste panglici stilizate, triunghiulare, care au apărut peste tot pe Internet (un exemplu proeminent fiind pagina de prezentare a paginii Facebook) și, în timp ce ei au un anumit apel, trebuie să recunosc că efectul spațial pe care îl creează nu- Arăți bine la mine.

Panglicile sunt plăcute pentru un motiv, totuși - ei sparge paradigma de proiectare cea mai mare parte pe care suntem obligați în mod tradițional și sunt unul dintre puținele elemente vizuale care o fac într-un mod neclar. Dar, așa cum se spune în vechime, ar trebui să existe mai mult decât o modalitate de a pielea o pisică - deci, în acest tutorial, voi propune un stil vizual alternativ pentru astfel de elemente, pe care le găsesc mult mai natural și estetic plăcut. Sper că îți place și folosești bine!

Ce vom face

În acest tutorial, vom folosi unul dintre elementele noi HTML5 nav etichetă, ca un container pentru o listă orizontală de linkuri. Voi explica pe scurt cum se poate face sa arate destul folosind un pic de CSS.

Cel mai important, vă veți familiariza cu elementele de bază ale pluginului jQuery Waypoints, care va oferi funcționalități avansate: pe măsură ce utilizatorul scroll în jos, bara de navigare se va lipi de partea superioară a ferestrei de vizualizare, precum și schimbarea pentru a indica secțiunea curentă . Ca un pic adăugat, vom folosi un alt plugin, ScrollTo, pentru a oferi o derulare ușoară și o poziționare convenabilă atunci când utilizatorul face clic pe linkurile de navigare.

Pasul 1: Cutia

Sunt sigur că deja cunoașteți diferitele elemente noi introduse cu HTML5. În acest exemplu vom folosi două dintre ele: