Blocare simplă plutitoare pe jQuery
În general, acest subiect nu ma ocolit și am decis să mă fac un meniu plutitor, cu ajutorul jQuery și acest bloc foarte fix. Acum, meniul "plutește", așa cum a fost intenționat, iar acum este timpul să împărtășiți cât de ușor și rapid să faceți un astfel de bloc plutitor, cu o părtinire a site-ului sau a blogului.
În principiu, un simplu bloc fix poate fi implementat numai cu ajutorul poziției CSS-proprietate cu valoarea fixată. dar atunci va fi definit inițial într-un anumit punct de pe monitorul vizitatorului și "plutitor", se va numi problematică. Avem nevoie de un bloc, care este mutat și fixat numai când pagina este derulată.
Pentru a face mai clară:
DEMO
Imediat am observat că opțiunile de implementare în rețea sunt suficiente, dar în realitate nu sunt multe. Majoritatea au cod greoi, deseori inutil, iar unele nu sunt în întregime universale. Această opțiune este cea mai ușoară, fără animație și altele - un CSS mic și destul de puțin jQuery.
HTML va arăta astfel:
Acum CSS. De îndată vom adăuga și o nouă clasă la care am stabilit poziția:
fundal plutitor: # 1c1c1c;
culoare: #fff;
font: normal normal 14px Tahoma;
padding: 10px;
lățime: 300px; / * specificați lățimea * /
>
.poziție fixă: fixă;
top: 10px; / * aici specificăm o liniuță de sus * /
z-index: 9999; / * setați blocul deasupra tuturor elementelor de pe pagină * /
>
Poziționarea la blocul de flăcări. Nu este nevoie să o specificați, dar ar trebui să fie localizată în interiorul elementului părinte, care va fi poziționat pe pagină. De asemenea, trebuie să specificați lățimea altfel pentru o poziționare fixă, care va ocupa întreaga zonă accesibilă și va depăși limitele părintelui.
Și aici este script-ul jQuery în sine. Sarcina sa este simplă - când pagina este derulată la o anumită înălțime, adăugați o clasă și fixați blocul.
$ (functie () $ (fereastra) .scroll (functie () <
var top = $ (document) .scrollTop ();
dacă (top> 200) $ ("floating") addClass ("fix"); // 200 este valoarea înălțimii de defilare a paginii pentru adăugarea unei clase
altceva $ ('floating'). removeClass ('fix');
>);
>);
Tot ceea ce este necesar pentru proiectare, poziția este prescrisă în CSS, scriptul execută, așa cum ar trebui, funcția organizațională. Nu mai ușor unde.
Nu uitați că pentru munca de acest tip de labuda la site-ul ar trebui să fie conectat la jQuery bibliotecă.
$ topPos = $ ('floating'). offset () top; // topPos este valoarea din partea superioară a blocului în fereastra browserului
$ (fereastră) .scroll (funcția () <
var top = $ (document) .scrollTop ();
dacă (top> topPos) $ ("floating") addClass ("fix");
altceva $ ('floating'). removeClass ('fix');
>);
>);
Pagina demo de la începutul articolului prezintă prima versiune a scriptului, fără modificări.
Cum să eliminați compensările de conținut când un bloc devine plutitor
Inițial, în timp ce unitatea nu a pluti, este poziționarea relativă și de a participa pe deplin într-o structură pagină Web, de exemplu, dimensiunile sale, în special în înălțime, afectează poziția altor blocuri ale site-ului. Când derulați în unitatea de procesare achizitionate, prin poziționare script fix, cade din structura generală și conținutul sau blocuri care au fost mai mici ocupă imediat spațiul eliberat. Acest „salt“, desigur, nu este plăcut dezvoltator și nu este plăcut vizitatorului. Noi rezolva această problemă este foarte simplu, la nivelul de HTML si CSS.
soluţie:
Trebuie să înfășurați codul unității plutitoare într-un container suplimentar:
În acest caz, înălțimea blocului de blocuri în CSS trebuie să fie specificată egală cu înălțimea blocului plutitor, incluzând liniuțele superioare și inferioare, exterioare și interioare:
fundal plutitor: # 1c1c1c;
culoare: #fff;
font: normal normal 14px Tahoma;
padding: 10px;
margine: 5px;
înălțime: 500px;
lățime: 300px;
>
.înălțimea containerului: 530px; / * înălțimea blocului + liniuțele * /
>
Ca urmare, în timp ce blocul se deplasează liniștit împreună cu pagina, spațiul pentru acesta va fi rezervat de containerul părinte, ceea ce nu va permite ca orice alt conținut să sară.
Poziția în blocuri și pe site-urile cu lățimea fixă
Deoarece punerea în aplicare a acestui exemplu de realizare, unitatea plutitoare este utilizată cu o poziționare fixă de clasă extensie. caracteristici care se află în faptul că poziția blocului de pe pagina de web nu este legată de membrii părinte, și la fereastra browser-ului, este firesc ca pe site-urile cu o lățime bine definită, unitatea se poate comporta incorect, alunecând limitele pentru șablon și unitatea de bază. Cu toate acestea, iar această problemă este rezolvată la nivelul CSS.
soluţie:
Blocul părinte trebuie să aibă o lățime, orice valoare (%, px, etc.), altele decât auto.
Pentru clasa principală a blocului pl-th, în acest caz. este necesar să se precizeze lățimea exactă în unități absolute (de exemplu, px), în timp ce aceasta, inclusiv indentarea, nu trebuie să depășească lățimea blocului părinte.
Pentru clasa excedentară, în acest caz .fixată. în stiluri, nu trebuie să specificați schimburile la stânga și la dreapta.
/ * ----- * /
Demo cu soluții aplicate:
DEMO 1
Manipularea blocului plutitor în raport cu alte blocuri ale locației
Cea mai obișnuită problemă este că, dacă un bloc conține o cantitate mare de informații, adică. înălțimea lui crește, atunci când se deplasează spre partea de jos a paginii, blocul ajungând la subsol, înoată și trece peste el, blocând și ascunzând o parte din ea.
În mod ideal, atunci când se atinge un subsol sau alt element de pagină specificat, blocul trebuie să se oprească (oprește în mișcare) înainte de a schimba sau să modifice fără probleme vizibilitatea, de exemplu dispare. Pentru a rezolva această problemă, este necesar să completați scenariul cu puțin, adăugând anumite condiții pentru comportamentul blocului plutitor în această situație, păstrând încă simplitatea lui :)
soluţie:
Made la variabila de script pentru a determina distanța până la oprire-unitatea dorită (de exemplu: toate aceeași „subsol“) și, într-o altă variabilă pentru a obține înălțimea unității plutitoare și apoi se adaugă la aceste condiții deja disponibile, suplimentare. În acest caz, pentru a face blocuri dispar atunci când pivniță. Ca urmare, codul de script-ul ar arata astfel:
$ (funcția () var topPos = $ ('floating').
$ (fereastră) .scroll (funcția () <
var top = $ (document) .scrollTop (),
pip = $ ('footer') offset () top, // distanta fata de subsol din partea de sus a ferestrei browserului
înălțime = $ ("floating"). externHeight (); // obține valoarea înălțimii blocului blocului
dacă (de sus> topPos top
altfel
>);
>);
Valoarea înălțimii variabile este opțională, dacă altitudinea este cunoscută și nu se va schimba, puteți specifica pur și simplu numerele:
Cu toate acestea, nu este întotdeauna necesar ca elementul să dispară și să apară, uneori este necesar ca blocul plutitor să se oprească când se ajunge la "subsol". Și în acest caz, totul este implementat destul de simplu. Codul va fi apoi:
pentru că în acest caz se folosește poziționarea absolută, apoi elementul părinte, la baza căruia va fi apăsat blocul, stilurile ar trebui să fie indicate în mod explicit poziția relativă - poziția: relativă;
Pentru mai multe detalii, consultați fișierele HTML atașate mai jos
Fișiere cu cod sursă pentru ambele variante
Urăsc când blocurile plutitoare aproape o parte din textul postului. Opțiunea propusă este complet diferită.
M-am dus la blogul meu să mă gândesc ce fel de informații pot fi plasate într-o astfel de unitate plutitoare. De îndată ce mă gândesc la asta, voi încerca să o rezolv.
Vă mulțumim pentru informații utile. Sunt 150 și castraveți;)
Am adăugat un pic de articol pentru claritate. Pe proiectul de lege se închide textul sau nu, este o întrebare pentru staționarea unei astfel de unități :) Demo-ul doar aranjat, pentru claritate, aici meniul este aranjat în mod diferit și, de asemenea, cum ar fi bine.
150 este întotdeauna bun;).
de ce se calculează după ce distanța va intra în bloc? Prefer să o fac: imediat ce parcurg acest bloc, va merge imediat cu mine.
$ (funcție () var box = $ ('messagelist'); // blocul tău
var top = box.offset () top - parseFloat (box.css ('marginTop') înlocuire (/ auto /, 0));
$ (fereastră) .scroll (funcție () var windowpos = $ (fereastră) .scrollTop ();
dacă (windowpos
box.css ("de sus", 0);
>
>);
>);
$ (funcție () var box = $ ('messagelist'); // blocul tău
var top = box.offset ().
$ (fereastră) .scroll (funcție () var windowpos = $ (fereastră) .scrollTop ();
dacă (windowpos
>);
>);
Deoarece funcția .offset () în JQ returnează o valoare care include indents, iar marginTop va schimba și va seta valoarea dorită.
Meniul orizontal de sus al site-ului este situat de 130px din partea de sus, lățimea meniului este de 46px.
Când pagina se derulează la înălțimea specificată, meniul se fixează, totul este corect, așa cum ar trebui să fie. Dar când devine astfel, ea cade din blocuri obișnuite, și se pare că pagina este sărituri pe aceste 46 de pixeli.
Spune-mi cum să o fac fără probleme, ca și aici pe site-ul tău? Mulțumesc!
Toate perfect pictat, dar am observat că în unele browsere (e-mail, SRWare Iron, Yandex), am dreptul de a acoperi blocul de defilare atunci când coaja de până la peretele ferestrei browserului. Am un site cu lățime fixă. Ce se poate face pentru unele browsere care blochează au rămas în coloana din dreapta și derulați în jos nu se încadrează corect?
Această opțiune este concepută pentru asta. astfel încât blocul să fie întotdeauna vizibil, poziționarea fixă oferă o legătură cu fereastra browserului și nu cu marcarea site-ului. Acestea sunt costurile opțiunii. Avem nevoie de mai mult - avem nevoie de un alt scenariu.
Este păcat. Toate inet cu acest exemplu, și pentru un loc îngust nu există nimic sensibil. Am găsit aici astfel de variantă _habrahabr.kz/blog/programming/567.html, dar există o altă Poser, cu o scădere a browser (ecran) - unități în mod constant pentru a derula în jos pe site-ul pe termen nelimitat, nu se poate vedea subsol.
Puteți să adăugați la acest script, adăugați condiții suplimentare care determină pozițiile sale în funcție de dimensiunile ferestrei browserului, dar acest lucru nu va fi un bloc "plutitor" simplu.
E doar un fel de coșmar! Într-adevăr totul avansat, că nimeni nu a avut o întrebare: "Și unde este, de fapt, un miracol de inserat?". Nu este prima zi în blogging, dar nu recurg la corectarea codului în fiecare zi. Prima dată când văd instrucțiunea fără a indica unde să introduc totul!
1. Primul cod a înfășurat widgetul necesar.
2.CSS pur și simplu introdus în "template setup" - "add CSS".
3. Scriptul introdus imediat înainte / în cap, împachetând "scriptul" în eticheta de detașare / închidere. Înainte de asta, am conectat biblioteca, adăugând codul necesar de pe site-ul dvs.
Acum despre ceea ce ați făcut și de ce aveți "NU FIGA nu funcționează!"
Reinitializarea scriptului folosind .resize (mobileFloating ()) nu ajută, trebuie doar să reîncărcați pagina. Se pare că browserul dă scriptului date greșite.
Te rog spune-mi cum să rescaneze dom (sau, mai degrabă, să învețe o nouă poziție a unității plutitoare) după noul conținut (extindere / restrângere unitate de tip FIELDSET) apare mai sus (în sus copac)? Acum, se dovedește astfel: deschideți pagina, are un set de câmpuri minime, iar mai jos este o rețea cu un bloc plutitor. Când defilați toate bine. Cu toate acestea, în cazul în care am deschis un FIELDSET și începe pentru a derula, unitatea plutitor este fixat atunci când limitele stabilite, atunci când se încarcă pagina (de exemplu, în raport cu înălțimea la unitatea plutitoare care a fost înainte am deschis FIELDSET).
În script-ul pe care doriți să adăugați un eveniment făcând clic pe FIELDSET, care se va schimba valoarea înălțimii blocului FIELDSET la unitatea plutitoare a fost fixată după scroll FIELDSET.
Prompt vă rog ce să modificați că sa dovedit astfel:
să spunem că există 2 blocuri, stânga și dreapta, în stânga blocul este de 3 ori mai lung decât blocul drept, iar blocul drept este mai mare decât fereastra browserului. și anume care ar vedea sfârșitul blocului drept de care aveți nevoie pentru a parcurge întregul bloc stânga (și depinde de dimensiunea ecranului). Este necesar să se facă că blocul drept, de asemenea, derulat împreună cu stânga, dar atunci când blocul drept se termină doar se lipeste și nu se mișcă.
Asa ca, sper sa intelegeti si sa ajutati :)