Cum să creați un antet de site web lipicios

Anteturile site-urilor care rămân pe loc atunci când un utilizator derulează au devenit un element de design foarte popular. Acestea permit utilizatorului să acceseze cu ușurință navigarea fără a fi nevoie să deruleze în sus de fiecare dată când dorește să aleagă o altă pagină sau opțiune.

Elementele cu această funcționalitate sunt adesea numite „lipicioase” deoarece se lipesc și rămân vizibile pe măsură ce utilizatorul se deplasează pe site. Când un utilizator ajunge pentru prima dată pe site, elementele vor fi în poziția lor de pornire, dar apoi antetul lipicios va rămâne în același loc.

Deoarece navigarea este unul dintre cele mai importante elemente ale unui site web, adoptarea acestei abordări ajută la ca navigarea să fie mai accesibilă. Având o navigare care rămâne pe loc, permite un flux ușor pentru utilizator pe măsură ce se deplasează prin conținutul site-ului, ceea ce este extrem de important.

„Elementele de navigare lipicioase ajută la crearea unui flux de utilizatori ușor pe măsură ce oamenii se deplasează prin site-ul dvs. ”

Ce îl face lipicios?

Poziționarea fixă ​​este o componentă cheie pentru ca navigația să rămână pe loc. Acest element cu poziție fixă ​​este poziționat relativ la fereastra de vizualizare sau la fereastra browserului în sine. Deoarece fereastra de vizualizare nu se schimbă atunci când site-ul este derulat, acest element poziționat fix va rămâne în același loc când pagina este derulată.

Notă: nu încercați acest lucru pe site-ul dvs. live

Amintiți-vă: nu trebuie să schimbați niciodată codul direct pe site-ul dvs., pentru a vă asigura că nimic nu se întrerupe. Aplicația noastră gratuită de dezvoltare locală, Local, vă va ajuta să configurați un mediu de testare în care puteți urma în siguranță acest tutorial.

Cum facem ca navigația să rămână într-un singur loc?

A face navigarea lipicioasă nu ar putea fi mai ușoară; este doar făcut cu stilul CSS. Practic arată cam așa:

.navbar-fixed-top {

position: fixed;

right: 0;

left: 0;

z-index: 999;

}

Indiferent cât de lungă este pagina dvs. sau de câte ori derulați în sus și în jos, navigarea va fi „blocata” în partea de sus a paginii. O clasă numită .navbar-fixed-top a fost adăugată la navigare care creează plasarea pentru navigare. Am adăugat această clasă la eticheta nav. Poziția este setată la fix, iar adăugarea poziționării la stânga și la dreapta asigură că plasarea este corectă și ocupă întreaga lățime a paginii.
Rețineți, de fiecare dată când această clasă este aplicată, va crea poziția fixă ​​a elementului. Cel mai probabil, această clasă va fi aplicată o singură dată, altfel ar exista mai multe elemente de pagină care se comportă la fel în același loc, creând o mizerie confuză.

Un alt aspect important este indicele z. Deoarece dorim ca navigarea să fie întotdeauna vizibilă, trebuie să ne asigurăm că nu se suprapune cu alte elemente. Când facem referință la z-index , vorbim despre proprietatea CSS care stabilește ordinea stivei de elemente specifice. Un element cu o ordine de stivă mai mare este întotdeauna în fața altui element cu o ordine de stivă mai mică. O valoare de 999 este un număr mare, ceea ce îl face un pariu sigur pentru navigare.

Ajustați corpul paginii

Deoarece navigarea se află acum într-o poziție fixă, va acoperi o parte a conținutului din partea de sus. Există o soluție simplă pentru asta. Adăugarea de umplutură în partea de sus a corpului va împinge pagina în jos, astfel încât conținutul din partea de sus nu va fi acoperit de antet când utilizatorul ajunge pe pagină.
Puteți adăuga padding la corpul fișierului dvs. CSS:

body {

padding-top: 75px;

}

Rețineți că căptușeala dvs. poate fi mai mare sau mai mică, în funcție de cât de gros este antetul fix.

Faceți ca antetul lipicios să devină zdruncinat

Este obișnuit să găsești un antet care devine mai subțire atunci când un utilizator derulează peste un anumit punct, făcându-l să pară slăbănog. Când navigarea scade în dimensiune, acesta ajută utilizatorul să ofere mai mult spațiu pentru a vedea conținutul principal al site-ului. Acest lucru este util în special pe dispozitivele mai mici. Vom folosi o combinație de CSS și JavaScript pentru a face acest lucru.

Navigare rapidă cu script AnimatedHeader

Pentru a adăuga un antet animat care își va schimba dimensiunea pe defilare, există o soluție grozavă, ușoară, pentru a face navigarea slăbită. Se numește AnimatedHeader. Are licență MIT, deci poate fi folosit pentru proiecte personale sau comerciale. Pentru a obține aceste fișiere, consultați AnimatedHeader pe GitHub.

CSS de bază pentru navigare

Să aruncăm o privire la două stiluri CSS importante. Probabil că primul ți se pare familiar, .navbar-fixed-top care specifică înălțimea, lățimea și poziția fixă ​​pentru navigarea lipicioasă. Mai jos, puteți vedea că există o altă clasă adăugată care specifică o înălțime de 75px. Aceasta este dimensiunea „strivită”.

.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;
}

Pentru a modifica dimensiunea, se folosește JavaScript pentru a adăuga clasa .cpb-af-header-shrink . Să aruncăm o privire la partea din script care face ca acest lucru să se întâmple:

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;
}

Doar o reamintire, există mai multe în script, așa că asigurați-vă că descărcați codul sursă, astfel încât să aveți toate componentele. După cum puteți vedea, după ce un utilizator defilează peste un anumit punct, se adaugă clasa .cpb-af-header-shrink . Dacă utilizatorul derulează înapoi pagina, această clasă este eliminată.

Opțiunea de poziționare lipicioasă CSS

Există, de asemenea, o opțiune care poate fi mai puțin complicată. În funcție de suportul pentru browser pentru care proiectați, position: sticky; face crearea unui antet lipicios foarte simplă. Suportul pentru browser nu este groaznic, dar nici nu este complet global. Când ați declarat sticky, pot fi folosite prefixe. Consultați Pot să folosesc pentru mai multe detalii.

O modalitate simplă de a descrie poziționarea lipicioasă este că este o combinație de poziționare relativă și fixă. Bănuiesc că ai întâlnit destul de mult o poziție lipicioasă. Vorbim de antete aici, dar este util și pentru orice element de interfață care doriți să fie „lipicios” pe măsură ce utilizatorii derulează. Ei văd că se „blochează” atunci când elementul ajunge la o anumită distanță de la marginea ferestrei de vizualizare.

Elementul este tratat ca poziționat relativ până când atinge un anumit punct și apoi este „fix”. Acest punct este declarat folosind CSS. „Punctul” este practic atunci când specificați sus, jos, stânga sau dreapta, așa cum ați face cu poziționarea absolută. Trebuie să specificați astfel încât elementul să aibă ceva de care să „lipiți”.

Poziție de utilizare: lipicios

Este destul de simplu de folosit. Câteva declarații CSS și am reușit să am un antet lipicios. Iată trei pași simpli:

1. Găsiți stilul corect, astfel încât să puteți declara elementul ca lipicios folosind position:sticky; (nu uitați de prefixele browser precum position: -webkit-sticky; ).
2. Alegeți „marginea lipicioasă” (sus, dreapta, jos sau stânga) de care să „lipiți” elementul.
3. Declarați distanța de la „marginea lipicioasă”, adică 10px pentru un antet care devine lipicios atunci când este la 10px distanță de zona de defilare.

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

Nu am vrut niciun spațiu între antetul lipicios și fereastra de vizualizare, așa că este la 0 pixeli de sus. Puteți vedea acest exemplu pe Codepen.

Situații de preaplin lipicios de care trebuie să fii conștient

Compatibilitate cu overflow

Este grozav, dar nu este perfect. Există unele limitări. Debordarea poate fi uneori puțin imprevizibilă. Cel mai bine este să rămâneți departe de anumite tipuri de debordare pe un element părinte cu ceva care are nevoie position: sticky . Pot exista probleme cu overflow automat, scroll sau ascuns.

Suport limitat pentru browser

Suportul pentru browser este limitat, așa că utilizarea regulii de supports pentru a detecta dacă browserul actual acceptă poziționarea lipicioasă este o opțiune. Asta arata ca:

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

Este important să ne gândim dacă poziționarea lipicioasă este absolut necesară. Dacă este, se poate folosi abordarea cu poziționare fixă. Dacă nu este absolut necesar sau dacă suportul pentru browser nu este o problemă, abordarea lipicioasă este mai ușor de implementat.

Poate părea complex la început, dar nu există niciun motiv să fii blocat într-o rută de navigație; este relativ simplu să-ți faci navigarea lipicioasă și zdrobită. Cu o poziționare fixă ​​CSS simplă, puteți crea cu ușurință un antet de site lipicios. Cu niște JavaScript simplu, navigarea fixă ​​poate fi îmbunătățită prin strângerea la o înălțime redusă, oferind utilizatorilor mai mult spațiu pentru a vizualiza conținutul site-ului.

Nu încercați asta pe site-ul dvs. live

Creați un antet de site lipicios în timp ce site-ul dvs. este pe Local! Aflați mai multe și descărcați-l gratuit aici!

Acest articol a fost publicat inițial pe 2 februarie 2016. Ultima actualizare a fost 14 octombrie 2018.