Salutări, cititorii acestui blog. Astăzi vreau să vă spun cum să se stabilească meniuri când derulați în josul paginii, astfel încât acesta a fost întotdeauna la vedere. Acest comportament este implementat pe mai multe site-uri. Să ne și vom încerca să înțelegem cum funcționează. Am arată două moduri de fixare: în css pur (cu unele convenții) și prin intermediul jQuery.
Cum sa faci un meniu fix, fără script-uri?
Deci, cel mai simplu mod - este de a utiliza o poziționare fixă, și să-l utilizați pentru a poziționa meniul la locul potrivit, atunci nu va dispărea atunci când derulați. Să încercăm.
Am făcut un marcaj rapid. După cum puteți vedea, nu am folosit chiar și lista doar enumerate link-urile nav în container. Și acest lucru stiluri:
Lățimea #menu: 100%;
>
#menu o culoare: #fff;
display: inline-block;
lățime: 20%;
fundal: gradient liniar (spre dreapta, RGBA (206,220,231,1) 0%, RGBA (89,106,114,1) 100%);
marja de-dreapta: -4px;
font-size: 18px;
text-align: center;
padding: 10px 0;
>
De obicei, meniu fix se întinde pe întreaga lățime a paginii. Vom face acest lucru prea. În consecință, din moment ce meniul 5, lățimea fiecărei lăsați-l să fie de 20%, în timp ce acestea ocupă pe deplin întreaga lățime a ferestrei.
Meniul va fi în colțul din stânga sus al site-ului, așa cum se cade din fluxul normal al blocurilor și ei pur și simplu încetează să-l observe. Este demn de remarcat faptul că eu consider că este oportun să opțiunea css numai în cazul în care meniul de proiectare ar trebui să fie cel mai important element. Dacă nu ați făcut, eu recomand a doua metodă, care este acum și ia în considerare.
css meniu fix și jquery
Pentru această metodă, va trebui să se conecteze biblioteca jquery. Descărcați-l de pe site-ul oficial al dezvoltatorilor, dacă nu aveți deja unul. Fișierul ar trebui să fie plasat într-un dosar cu fișierele noastre, noi lucrăm cu. De asemenea, trebuie să vă conectați biblioteca în sine, precum și dosarul în care vom scrie scenariul pentru punerea în aplicare a de fixare.
Deci, aici sunt aceste două linii, vom include aceste fișiere. Meniul de marcare nu va fi nimic diferit, cu excepția faptului că trebuie să adăugați la clasa de stil nav.
Concluzia este că suntem în jQuery atunci când un anumit eveniment va comuta clase. Acestea sunt stiluri:
lățime # Menu.normal: 100%;
>
# Menu.fix poziție: fix;
top: 0; stânga: 0;
lățime: 100%;
>
Adică, este doar meniul nostru normal implicit. Cu această metodă nu se află neapărat în partea de sus a paginii, acesta poate fi oriunde. Clasa fix adaugă un meniu de la coordonatele de poziționare fixe și îl otrăvește în colțul din stânga sus al ferestrei. Acum totul este gata, și stânga pentru a scrie un script web care va realiza clasele de comutare. În mod implicit, clasa nu este repara meniul nostru, acesta va fi adăugat la un anumit eveniment. Aici este script-ul în sine:
$ (Document) .ready (funcția () var $ meniu = $ ( «# meniul»);
$ (Fereastră) .scroll (funcția () în cazul în care ($ (aceasta) .scrollTop ()> 150 # 038; # 038; $ Menu.hasClass ( «normală»)) $ menu.removeClass ( «normală») addClass ( «fix») .;
> Else if ($ (aceasta) .scrollTop () normal. Apoi, clasa trebuie să iasă, și în loc să fie adăugate corecții. Ceea ce face un meniu fix.
Mai jos se realizează și efectul opus - în cazul în care utilizatorul derulează cel puțin 150 de pixeli din partea de sus a ferestrei, atunci clasa fix trebuie să fie curățate și plasate clasa implicită.
Acum defini înălțimea corpului selectorului de mai multe mii de pixeli pentru a afișa o defilare verticală și încercați pentru a defila în jos a paginii. Meniul va rămâne la partea de sus. În acest caz, acesta va fi în poziția sa inițială, până când derulați la maximum 150 de pixeli, după care este garantat pentru a merge în colțul din stânga sus.