Egyszerű lebegő blokk a jquery-on
Egyszerű lebegő blokk a jQuery-n
Általában ez a téma nem ment meg, és úgy döntöttem, hogy úszó menüt hozok magammal, a jQuery és a nagyon fix blokk segítségével. És menük „lebeg”, ahogy azt, és most itt az ideje, hogy megosszák milyen könnyen és gyorsan, hogy egy ilyen úszó egység eltolt webhelyén vagy blog.
Elvileg egy egyszerű rögzített blokkot csak a CSS-property pozíció segítségével lehet végrehajtani a rögzített értékkel. de akkor először pontosan meg kell határozni egy adott ponton a látogató monitorán és "lebegő", akkor problémát jelent. Szükségünk van egy blokkra, amelyet csak az oldal görgetése esetén váltunk át és rögzítünk.
A világosabbá tétel érdekében:
DEMO
Azonnal megjegyzem, hogy a hálózat megvalósítási lehetőségei elégségesek, de valójában nem sok értelmes. A legtöbbnek nehézkes, gyakran szükségtelen, kódja, és néhány nem teljesen univerzális. Ez a lehetőség a legegyszerűbb, anélkül, animáció és egyéb - egy kis CSS és egy kicsit jQuery.
A HTML így fog kinézni:
Most CSS. Egyszerre hozzáadunk egy új osztályt is, amelyen a pozícionálás rögzített:
lebegő háttér: # 1c1c1c;
szín: #fff;
font: normal normal 14px Tahoma;
párnázás: 10px;
szélesség: 300px; / * adja meg a szélességet * /
>
.rögzített helyzet: rögzített;
top: 10px; / * Itt adunk meg egy felsőbetűt * /
z-index: 9999; / * állítsa be a blokkot az összes elem tetején * /
>
Helymeghatározás a .floating blokkban. Ezt nem kell megadnia, de a szülőelemen belül kell elhelyezkednie, amely az oldalon lesz elhelyezve. Szintén meg kell adnia a szélességet, ha egy rögzített pozícionálásnál az egész hozzáférhető területet elfoglalja, és túl fogja lépni a szülő határait.
És itt van a jQuery szkript is. A feladat egyszerű - ha az oldalt egy bizonyos magasságra görgetjük, adjunk hozzá egy osztályt és rögzítsük a blokkot.
$ (függvény () $ (ablak) .scroll (függvény () <
var top = $ (dokumentum) .scrollTop ();
ha (top> 200) $ ('floating') addClass ('fix'); // 200 az oldal görgetési magasságának értéke egy osztály hozzáadásához
else $ ('floating') removeClass ('fix');
>);
>);
Mindaz, ami szükséges a tervezéshez, pozícióhoz a CSS-ben van írva, a szkript végrehajtja a szervezeti függvényt. Könnyebb nem hol.
Ne felejtsük el, hogy az ilyen típusú labudák munkájához a helyszínt a jQuery könyvtárhoz kell csatlakoztatni.
$ (függvény () var topPos = $ ('floating') .offset () top; // topPos az érték a blokk tetejétől a böngészőablakig
$ (ablak) .scroll (függvény () <
var top = $ (dokumentum) .scrollTop ();
ha (top> topPos) $ ('floating') addClass ('fix');
else $ ('floating') removeClass ('fix');
>);
>);
A cikk elején található demóoldal a szkript első verzióját jeleníti meg, módosítás nélkül.
A tartalomeltolódások eltávolítása, amikor egy blokk lebeg
Kezdetben, amíg a blokk nem lett lebegő, viszonylagos pozícionálással rendelkezik, és teljes mértékben részt vesz a weboldal struktúrájában, azaz. annak mérete, különösen magassága befolyásolja a hely más blokkjainak helyzetét. Amikor gördít a feldolgozó egységet megszerzi keresztül script fix elhelyezése, kiesik az általános szerkezetét és tartalmát, vagy blokkokat, amelyek alacsonyabb azonnal elfoglalja a megüresedett helyet. Ez a "ugrás" természetesen nem teljesen kellemes a fejlesztő számára, és egyáltalán nem kellemes a látogató számára. Ez a probléma egyszerűen megoldható, a HTML és a CSS szintjén.
megoldás:
A lebegő egység kódját egy másik tartályba kell beágyazni:
Ebben az esetben a CSS-ben lévő blokk-csomagoló magasságának meg kell egyeznie a lebegő blokk magasságával, amely magában foglalja a felső és az alsó, a külső és a belső behúzást is:
lebegő háttér: # 1c1c1c;
szín: #fff;
font: normal normal 14px Tahoma;
párnázás: 10px;
margin: 5px;
magasság: 500px;
szélesség: 300px;
>
.tartály magassága: 530px; / * blokkmagasság + behúzások * /
>
Ennek eredményeképpen, amíg a blokk csendesen gördül az oldal mellett, a helyet a szülõtartály fogja fenntartani, ami nem engedi, hogy minden más tartalom ugorjon.
Belső blokkok elhelyezése és rögzített szélességű helyeken
Mivel a lebegő blokk ezen verziójának végrehajtása során egy további, fix pozícionálású osztályt használnak. funkciók, amelyek abban rejlik, hogy a helyzet a blokk a weboldal nem kötődik szülő tagjai, és a böngésző ablakot, akkor természetes, hogy a helyszínek jól meghatározott szélességű, az egység helytelenül működhet, lecsúszott a határértékeket a sablont és a szülői egység. Ez a probléma azonban megoldódott a CSS szintjén.
megoldás:
A szülőblokknak szélességnek, bármilyen értéknek (%, px, stb.) Kell lennie, mint az automatikus.
A pl-blokk fő osztályára, ebben az esetben .floating. meg kell adni a pontos szélességet az abszolút egységekben (pl. px), miközben a bemélyedés nem haladhatja meg a szülőblokk szélességét.
A többlet osztály, ebben az esetben. stílusokban nem szabad megadni a bal és jobb eltolódásokat.
/ * ----- * /
Demo az alkalmazott megoldásokkal:
DEMO 1
A lebegő blokk manipulálása a hely más blokkjaihoz képest
A leggyakoribb probléma az, hogy ha egy blokk nagy mennyiségű információt tartalmaz, pl. a magassága megnövekszik, majd az oldal aljára történő görgetéskor a blokk, amely eléri az alagsort, úszik és áthalad rajta, blokkolja és elrejti egy részét.
Ideális esetben ha egy lábléc vagy bármely más meghatározott oldalelem eléri, a blokknak meg kell állnia (megáll a mozgásban), mielőtt elhalványulna, vagy simán megváltoztatná a láthatóságot, például eltűnik. A probléma megoldásához a forgatókönyvet egy kicsit kiegészíteni kell, hozzá kell adnunk bizonyos feltételeket a lebegő blokk viselkedéséhez ebben a helyzetben, egyszerűségét megtartva :)
megoldás:
Arról, hogy a szkript változó határozza meg a távolságot a kívánt stop-egységet (például: mindegy „pince”), és egy másik változó, hogy a magassága a lebegő egységet, majd add hozzá a már rendelkezésre álló, további feltételeket. Ebben az esetben a blokk eltűnik, amikor az alagsor eléri. Ennek eredményeképpen a parancsfájl így fog kinézni:
$ (függvény () var topPos = $ ('floating') .offset ().
$ (ablak) .scroll (függvény () <
var top = $ (dokumentum) .scrollTop (),
pip = $ ('footer') .offset () top, // távolság a pincébe a böngészőablak tetejétől
magasság = $ ('floating'). outerHeight (); // adja meg a blokk blokk magasságának értékét
ha (top> topPos felső
más
>);
>);
A változó magasság értéke opcionális, ha a magasság ismert és nem változik, egyszerűen megadhatja a számokat:
Azonban nem mindig szükséges az elem eltűnése és megjelenése, néha szükséges, hogy az úszó blokk leálljon, amikor az "alagsor" eléri. És ebben az esetben minden egyszerűen megvalósul. A kód ezután:
mert ebben az esetben abszolút pozícionálást kell alkalmazni, akkor a szülőelemet, amelynek aljára a blokkot nyomják, a stílusokat explicit módon jelezni kell relatív pozícionálásnak - pozíció: relatív;
További részletekért tekintse meg az alább csatolt HTML fájlokat
Fájlok mindkét változat forráskódjával
Utálom, amikor a lebegő blokkok blokkolja a bejegyzés szövegének szoros részét. A javasolt opció teljesen más.
Elmentem a blogomra, hogy elgondolkozzam, milyen információkat lehet elhelyezni egy ilyen lebegő egységben. Amint eszembe jut, megpróbálom megjavítani.
Köszönjük a hasznos információkat. 150 vagyok és uborka;)
Néhányan kiegészítették a cikket az egyértelműség érdekében. A törvényjavaslat lezárja a szöveget, vagy nem, ez egy kérdés állomásoztatása egy ilyen egység :) A demó csak elintézték az egyértelműség kedvéért itt a menü eltérő elrendezésben, és mint is finom.
150 mindig jó;).
miért számolják ki, hogy milyen távolságra fog a blokk beindulni? Inkább ezt csinálom: amint ezt a blokkot lapozom, azonnal velem megy.
$ (függvény () var box = $ ('# hírközlő'); // a blokkod
var top = box.offset () top - parseFloat (box.css ('marginTop') cserélje ki (/ auto /, 0));
$ (ablak) .scroll (függvény () var windowpos = $ (ablak) .scrollTop ();
ha (windowpos
box.css ('top', 0);
>
>);
>);
$ (függvény () var box = $ ('# hírközlő'); // a blokkod
var top = box.offset (). top;
$ (ablak) .scroll (függvény () var windowpos = $ (ablak) .scrollTop ();
ha (windowpos
>);
>);
Mivel a .offset () függvény a JQ-ban tér vissza, és a marginTop megváltoztatja és beállítja a kívánt értéket.
A webhely legfelsõ vízszintes menüje 130px-rõl felfelé, a menü szélessége 46px.
Amikor az oldal a megadott magasságra gördül, a menü rögzül, minden helyes, ahogy kellene. De amikor ez így válik, akkor a közös blokkokból származik, és kiderül, hogy az oldal ugrik ezen a 46px-en.
Mondja meg, hogy hogyan kell simítani anélkül, hogy ugorna, mint itt a webhelyén? Köszönöm!
Minden tökéletesen festve, de azt vettem észre, hogy egyes böngészők (mail, SRWare vasaló, Yandex) azt a jogot, hogy repülni a blokkot, amikor görgetés héja egészen a falon a böngésző ablakot. Van egy fix szélességű webhelyem. Mit tehetek annak megakadályozására, hogy ez a blokk ne maradjon a jobb oldali oszlopban néhány böngészőben, és ne lehessen jobbra görgetni?
Ezt az opciót erre tervezték. hogy a blokk mindig látható legyen, a rögzített pozícionálás kötelező a böngészőablakhoz, és nem a webhely jelöléséhez. Ezek az opció költségei. Többre van szükségünk - szükségünk van egy másik szkriptre.
Bocsánat. Minden internetes ezt a példát, és egy kis hely nincs semmi értelmes. Találtam itt ilyen variánst _habrahabr.kz/blog/programming/567.html de van egy másik pózoló, a csökkenés a böngészőben (képernyő) - egységek folyamatosan görgetni lefelé az oldalon a végtelenségig, nem látja a lábléc.
Akkor a szkript, hogy adjunk további feltételeket, amelyek meghatározzák álláspontját méretétől függően a böngésző ablakot, de ez nem lesz egy „egyszerű” lebegő egységet.
Ez csak egy rémálom! Ez az egész ugyanazt a fejlett, hogy senki fel a kérdést: „És hol, sőt, minden csoda paszta?”. Én, mint, nem az első napon a blogolás, hanem a helyes kódot minden nap menedéket. Az első alkalommal, amikor látom az utasításokat meghatározása nélkül, hogy hol beágyaz minden!
1. Az első kód csomagolva kívánt widgetet.
2.CSS egyszerűen tolta a „sablon konfiguráció” - „hozzá CSS”.
3.Skript ki közvetlenül a / head, csomagolva szakított / záró tag „script”. Mielőtt hogy ez magában foglalja a könyvtár, hozzátéve, hogy a szükséges kódot a webhelyen.
Most, hogy mit és miért van „a füge nem működik!”
Reinicializálást script .resize (mobileFloating ()) nem működik, csak az oldal újratöltődik. Úgy tűnik, a böngésző script ad hibás adatokat.
Kérem, mondja meg, hogyan kell újra beolvassa dom (vagy inkább tanulni az új helyzetben az úszó egység), miután az új tartalommal (expand / fieldset típusú egység) jelenik meg a felettük (a fára)? Most, hogy ezt: nyissa meg az oldalt, akkor dobott a fieldset, és már a rács alatt egy úszó egységet. Ha görgetni minden rendben van. Azonban, ha kinyitom a fieldset és elkezd görgetni, az úszó egységet rögzítjük, amikor a határain az oldal betöltésekor (azaz magasságához képest, hogy az úszó egységet, amely még azelőtt volt, kinyitotta a fieldset).
A script a felvenni kívánt esemény kattintva a fieldset, amely meg fogja változtatni az értéket a magassága fieldset blokk az úszó egységet követően rögzítenek fieldset tekercset.
Kérem, mondja meg, hogy mit kell változtatni, mi fog történni, mint ez:
tegyük fel, hogy 2 blokk, balra és jobbra, a bal blokk 3-szor hosszabb, mint a jobb, és jobb a böngésző ablak egység nagyobb. azaz hogy látná a végén a jobb egység kell görgetni a bal blokk (nos, ez attól függ, hogy a méret a képernyő). Azt kell tennie, hogy ez lenne a helyes egység görgeti a bal oldalon, de ha a megfelelő blokk végén ő csak botokkal és mozog.
Nos, valami ilyesmi, remélem meg fogja érteni, és segít :)