Un bloc plutitor simplu pe jquery

Blocare simplă plutitoare pe jQuery

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 dacă (partea de sus> pip - înălțime) // blocul se va ascunde când ajunge la distanța specificată
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 > altceva box.css ("poziție", "fix");
box.css ("de sus", 0);
>
>);
>);