Fix menü görgetés közben
Így a feladat ma, hogy egy menü, amely ragaszkodik a tetején a böngésző, ha az oldal görgethető.
A munka, szükségünk van a jQuery könyvtár és egy böngésző támogatja a CSS3.
Kezdjük a HTML felépítése Étlapunkon és nem volt annyira különbözik mindenki mástól.
HTML menü felépítése
Persze, hogy étlapunkon szerzett felismerhető megjelenés, csináltunk egy kis styling.
CSS menük kód
Most, miután az összes előkészítő munka, meg tudjuk kezdeni a probléma kezelésére is.
Annak érdekében, hogy tartsa be a menü tetején görgetés közben, akkor két dolog kell:
- Az első -, hogy mi a helyzet, hogy lépjünk a böngészőt. Ha lapozunk az oldalon a megfelelő időben, hogy változtatni a stílusát a menüben.
- A második -, hogy hozzon létre egy külön osztályt a menü egy rögzített pozíció és a szélessége a teljes képernyőt.
Ami az első feladat, hogy megbirkózzon egy kicsit jQuery kódot, de először létrehoz egy külön stílust vezetékes és a normál menü.
Külön osztályokban rögzített és normál állapot menü
Új osztály a menü
jQuery kódot
Most a kódot az első probléma:
Ez alapvetően minden végrehajtására, de nem áll le, és megy tovább.
Egy kis CSS3 szépség
Styling Étlapunkon segítségével CSS3, add árnyékok, lekerekített sarkok, stb Újabb SPE osztály alfa-bg, amely tartalmazza a háttér értékeit RGBA formátumban. A végleges változat stílusok:
Add jQuery hatásokat.
Most már játszhat a látványos megjelenésével a menüben. Az általunk használt módszer hover hozzáadása és eltávolítása átlátszó menü háttere, ha lebeg a kurzor és eltávolítását.
Összefoglalva azt mondhatjuk, hogy nincs határa a tökéletesség, és továbbra is játszani stílusok és hatások hosszú lehet.
A háttérben a lecke van egy másik ötlet: hogy a bővítés a fő tartalma a fajok eltűnésének sáv (a VKontakte).
Helló Van egy hasonló kérdést, csak reg.ru tárhely, nem értem, hol kívánja adni a jQuery kódot, és ha egy új fájlt ezzel a kódot létrehozni, hogyan kell hívni rá, hogy ez a munka? Hozzáadott blokk HTML, CSS és jQuery stílusozhatod először az újonnan létrehozott menu.js fájlt egy mappába a szerveren js, előírt a blokk kapcsolat menü jquery, mint ez:
Próbáltam és könnyebb, de ez véleményem szerint a legjobb, és nem lett belőle semmi. Gyönyörű Sinia menük jelenik meg, de ez nem zalepaet Más szóval jQuery nem működik. Nem vagyok nagyon erős mindezt. és különösen a js, ha nem nehéz megmondani, hogy milyen módon ki ez a helyzet.
Előre is köszönöm
Helló Meg sokat segített, azt olvastam, hogy egész idő alatt. És hogyan kell csinálni, hogy lenne görgetés után menü opredelonooe pixelek száma jelenik meg simán és nem bunkó? Várakozás pomoschi.Zaranee köszönhetően.
Próbálja meghatározni az alsó határ a csökkentő és akkor a feltétel az alábbiak szerint változott:
if ($ (ablak) .scrollTop ()> sidebarTop || $ (ablak) .scrollTop ()> sidebarbottom), ahol sidebarbottom - ez a $ (el) .offset () felső + $ (el) .height () ;.
valami ilyesmi
Én tényleg nem egészen értem js ....
azaz meg kell adni ezt a feltételt
if ($ (ablak) .scrollTop ()> sidebarTop || $ (ablak) .scrollTop ()> sidebarbottom)
magyarázza sidebarbottom így?:
var sidebarbottom = $ (El) .offset () felső + $ (El) .height () .;
tud kérem a kódot írni, és akkor én rosszul
azt, hogy
magassága (vagy magassága itt olyan üres, és hagyjuk?);
Jó napot! Segítség a biztonságos modul (Joomla 3.x GavickPro sablon)! Azt akarom, hogy biztosítsa a modul «topbar» görgetés esetén, eredetileg tetején található egész szélességében és hengerek együtt görgetést.
Csak egy konkrét kérdés: Kérem, segítsen nekem, milyen fájlt helyezze (néha összekeverik CSS és HTML). Olvastam elég erőforrás, de egy kicsit zavaró, ha nem tudja, hol másolni.
Jó napot, és hogyan segíthetek?
Jó éjszakát, nagy lehetőség fix menüt.
Hogyan lehet módosítani a kész jQuery kódot úgy, hogy ha lapozunk a végén a fix menü tetején eltűnt (azaz. E. Valószínűleg osztály megváltozott az alapértelmezettre)?
Próbáltam beilleszteni ez a harmadik feltétel:
else if ($ (this) .scrollBottom () = $ Menu.hasClass ( «rögzített»)) $ menu.fadeOut ( 'gyors', function () $ (this) .removeClass ( «rögzített»)
.addClass ( «alapértelmezett»)
.fadeIn ( 'gyors');
>);
>
Nem működik! Megmondaná, mi a baj, és nem correctament irányba tőlem?
Még a webhelyen ugyanazon post, hagyja a kérdést a „sima átmenet” - már szerzett.
Üdvözöljük észre, hogy nem csatlakoztatja a jQuery könyvtár a projekt ezt a szkriptet, és nem működik a webhelyen.
Csatlakoztassa a könyvtár és elérni a célt, látom a kódot
Kérem, mondja meg. menü tennie, hogy mozog a fülek ugyanazon az oldalon, és hogy az átmenet az egyik pontból a másik része a bevezetőben alá rejtett egy menüt, hogyan lehet megjavítani?
ha a kialakítás lehetővé teszi azt, csak adj egy belső teret felülről, a magassága a menü, minden egyes „Nyitott pontok”
de ha a kialakítása nem teszi lehetővé ezt, akkor írsz, akkor meg kell szerkeszteni script
Helló Az a tény, hogy az egység kezdetben rögzítését, és a felső margó az oldal 75 pixel. Lásd a cikket kódot, ez segít. Menü kell végrehajtani úgy, hogy eredetileg egy hedderom és csak akkor, ha a görgetés script, akkor változtassa meg a osztály egy fix helyzetben.
Dmitry. köszi a választ, akkor ez az, amit a helyzet: a piros blokk található, mielőtt a body tag egy statikus menü, itt a kód
var sm_bg_block = «# blokk-NEW9" ; // azonosítója fő menüsor
var sm_gap = 75; // menü műszak (pixel) a valódi határait az ablak
var sm_shift = 0; // menü műszak (pixel) vízszintesen a képernyő közepén
/ * A helyes működés menü nem ajánlott változtatni a jövőben kód * /
var sm_menu = «»;
var sm_x_crd = [];
var sm_y_crd = [];
var sm_bg_top, sm_bg_left, sm_bg_bot, sm_bg_right, sm_bg_zi;
var sm_i = 0;
var sm_x = 0;
var sm_y = 0;
var sm_bg_w = 0;
sm_bg_zi = parseInt ($ (sm_bg_block) .css ( «z-index»));
sm_bg_top = parseInt ($ (sm_bg_block) .css ( 'top'));
sm_bg_left = parseInt ($ (sm_bg_block) .css ( 'bal oldali'));
sm_bg_right = sm_bg_left + $ (sm_bg_block) .width ();
sm_bg_bottom = sm_bg_top + $ (sm_bg_block) .height ();
$ ( 'Div'.) Minden (function ()
if (
(sm_bg_zi
(Sm_bg_bottom> (parseInt ($ (this) .css ( 'top')) + $ (this) .height ())))
)
sm_menu + = ( «#» + $ (this) .attr ( 'id') + »,«);
>
>);
sm_menu = sm_menu.substring (0, sm_menu.length-2);
$ (Sm_bg_block) .css ( 'állásfoglalását', 'rögzített');
$ (Sm_bg_block) .css ( 'Z-index', parseInt ($ (sm_bg_block) .css ( 'Z-index')) + 500);
$ ( 'Body') append ($ (sm_bg_block)) .;
$ (Sm_menu) .Minden (function ()
$ (This) .css ( 'állásfoglalását', 'rögzített');
$ (Ez) .css ( 'Z-index', parseInt ($ (e) .css ( 'Z-index')) + 500);
$ ( 'Body') append ($ (this)) .;
>);
sm_bg_top = $ (sm_bg_block) .position () felső .;
sm_bg_left = $ (sm_bg_block) .position () bal .;
$ (Sm_menu) .Minden (function ()
sm_x_crd [sm_i] = $ (e) .position () bal - sm_bg_left .;
sm_y_crd [sm_i] = $ (e) .position () felső - sm_bg_top .;
sm_i ++;
>);
sm_bg_w = $ (sm_bg_block) .width ();
sm_y = sm_gap;
sm_i = 0;
$ (Sm_menu) .Minden (function ()
$ (Ez) .css ( 'top', sm_y + sm_y_crd [sm_i]);
sm_i ++;
>);
$ (Sm_bg_block) .css ( 'top', sm_y);
$ (Window) .resize (function ()
sm_i = 0;
sm_x = ($ (ablak) .width () - sm_bg_w) / 2 + sm_shift;
$ (Sm_bg_block) .css ( 'bal oldali', sm_x);
$ (Sm_menu) .Minden (function ()
$ (Ez) .css ( 'bal', sm_x + sm_x_crd [sm_i]);
sm_i ++;
>);
var $ menu = $ ( «# menü»);
$ (Window) .scroll (function () if ($ (this) .scrollTop ()> 100 $ Menu.hasClass ( «alapértelmezett»)) $ menu.removeClass ( «alapértelmezett») addClass ( «rögzített») .;
> Else if ($ (this) .scrollTop () <= 100 && $menu.hasClass("fixed")) $menu.removeClass("fixed").addClass("default");
>
>); // görgető
>);
Ha jól értem, amire szükség van egy kód a cikket, és szeretné adni, miután a body tag, és akkor csak lefelé görgetve blokk szorosan illeszkedik a (eltolt) a felső határ az oldal, állítsa kérjük, ha tévedek, én csak az új e valóban, remélem a segítséget.
Sajnos a munka révén a tervező, akkor megvan a támogatás, ami segít. Nem vagyok tisztában vele, és így több mint ez a cikk nem a kódot, és illessze be, ahol
Azt kell mondanom. ez a különbség azt tanácsolják, hogy a parancsot, ezért nem befolyásolja a tapadást a statikus menü a felső szélétől az oldalon, ha görgetni
le
Itt nem egészen értem, mi folyik) Ez a menü végre egy hagyományos CSS és jQuery, a kód nézd meg a cikket.
Dmitry, köszönöm a példa kód, akkor megmentette. Van még egy kérdés - az oldalon már van egy script a jQuery - a nagyobb képért (fancybox) saját mappa könyvtár fájljait. Amikor megpróbál regisztrálni egy fix menü kódlap előfordul néhány „script konfliktus” - nem működik a fancybox - fénykép látható egy külön ablakban. Kifelé az oldalról linket a könyvtár a rögzített menü - fancybox munkák után a fordított görgetés menü „ragad” a szétnyitott állapotban, és nem kerül vissza a helyére az oldalon. Milyen lehet a helyzet, ne mondd? Köszi előre.
Üdvözöljük, sajnos nem kér, mert az a tény, hogy már le is lehet sok oka lehet. De valószínűleg csak egy hiba a forgatókönyvet, nyissa meg a konzolt a böngészőben, és mit írnak róla, vagy adni egy linket a helyszínen nézem)
Ez lesz a helyes, hogy megtalálják a script fájlt a részét, amely megváltoztatja az a menü, és törölje azt.
Vagy egyszerűen vegye ki a stílusok rögzített állapotban .fixeddiv menü
Prompt, kérjük, hogy azt kell cserélni a script, hogy alkalmazkodjon jv_chao sablont?
var $ menu = $ ( «# jv-mainmenu»);
$ (Window) .scroll (function () if ($ (this) .scrollTop ()> $ header.height (); $ Menu.hasClass ( «alapértelmezett»)) $ menu.removeClass ( «alapértelmezett») addClass ( «rögzített») .;
> Else if ($ (this) .scrollTop () <= $header.height(); && $menu.hasClass("fixed")) $menu.removeClass("fixed").addClass("default");
>
>); // görgető
>);
így kell lenni?
Üdvözöljük uraim. Kérdések ... és a folyamat keres az interneten sudbinushka ajánlója. A Java nicherta nem értik, de a kampány témája és a példa a fenti menü ugyanaz a kérdésemre.
Van egy bolt a menüben kofe78.ru hely pontosan olyan, mint azt kell (nem a design, de az EU)
Érdemes az egészet OpenCart.
És azt kell, hogy rögzítse túl OpenCart.
Ha van olyan lehetőség, hogy megmutassuk, hogy ez hogyan történik lesz mérhetetlenül hálás. Még ügyetlen ...
Amennyire én értem van egy menüt egy fix helyzetben, amely vízszintes. Mi teszi ezt egy másik csúszott.