Hogyan javíts ha lapozunk a menü, nem eltűnni
Üdvözlet neked, az olvasók a blog. Ma azt akarom mondani, hogyan kell rögzíteni a menük, amikor lefelé görgetni az oldalt, úgy, hogy mindig szem előtt. Ez a viselkedés végre sok helyen. Nézzük, mi pedig megpróbáljuk megérteni, hogyan működik. Azt mutatják, hogy két módon rögzítés: tiszta css (néhány egyezmények), és via jQuery.
Hogyan készítsünk egy fix menü nélkül scriptek?
Tehát a legegyszerűbb módja - az, hogy egy fix elhelyezése, és használja a helyzetben a menüt a megfelelő helyre, akkor nem fog eltűnni, ha lapozunk. Próbáljuk.
Csináltam egy gyors jelölést. Mint látható, én nem is használja a listát, és csak a felsorolt nav linkeket a tartályban. És ez stílusok:
#menu szélesség: 100%;
>
#menu szín: #fff;
display: inline-block;
szélesség: 20%;
háttér: lineáris-gradiens (jobbra, RGBA (206,220,231,1) 0%, RGBA (89,106,114,1) 100%);
margin-right: -4px;
font-size: 18px;
text-align: center;
padding: 10px 0;
>
Általában fix menüt húzódik teljes szélességében az oldalt. Így teszünk is. Ennek megfelelően, mivel a menü 5, szélessége minden legyen 20%, míg azok teljesen elfoglalja a teljes szélessége az ablak.
A menü lesz a bal felső sarokban a helyszínen, hiszen kiesik a normális áramlását a blokkokat, és egyszerűen megszűnik észre. Érdemes megjegyezni, hogy úgy gondolom, hogy célszerű css beállítást csak akkor a tervezési menü kell a legfelső elem. Ha még nem, ajánlom a második módszer, ami most, és megvizsgálja.
Fix menü css és jquery
Ebben az eljárásban, akkor kell csatlakoztatni jQuery könyvtár. Töltsd le a hivatalos honlapon a fejlesztők, ha nem rendelkezik ilyennel. A fájlt kell elhelyezni egy mappát a fájlok dolgozunk. Azt is meg kell csatlakoztatni a könyvtár maga, valamint a fájlt, amelyben fogjuk írni a forgatókönyvet végrehajtásához rögzítés.
Szóval, itt van ez a két sor, akkor ezeket a fájlokat. Markup menü nem lesz semmi más, kivéve, hogy meg kell adni, hogy a nav stílus osztályban.
A lényeg az, hogy mi van a jquery, amikor egy adott esemény váltani osztályok. Ezek a stílusok:
# Menu.normal szélesség: 100%;
>
# Menu.fix helyzet: fix;
top: 0; bal: 0;
szélesség: 100%;
>
Ez azt jelenti, hogy ez csak a normális alapértelmezett menüt. Ezzel a módszerrel nem feltétlenül tetején található az oldalon, akkor bárhol lehet. Class fix hozzáad egy menüt a rögzített helymeghatározási koordinátákat, és mérgezi meg, a bal felső sarokban az ablak. Ezzel minden készen áll, és a bal levelet webes script, hogy rájönnek a kapcsolási osztályok. Alapértelmezésben az osztály nincs fix Étlapunkon, akkor hozzá kell adni egy bizonyos esemény. Itt látható a szkript maga:
$ (Document) .ready (function () var $ menu = $ ( «# menü»);
$ (Ablak) .scroll (function (), ha ($ (e) .scrollTop ()> 150 # 038; # 038; $ Menu.hasClass ( «normál»)) $ menu.removeClass ( «normál») addClass ( «fix») .;
> Else if ($ (this) .scrollTop () normális. Ezután az osztály meg kell kijutni, és helyette ki javítást. Ami fix menüt.
Az alábbiakban megvalósul és az ellenkező hatást - ha a felhasználó a legalább 150 képpont a tetején az ablakot, majd a javítást osztályba kell tisztítani, és helyezzük alapértelmezett osztály.
Most határozzuk meg a kiválasztó szerv magassága több ezer képpont megjelenítésére függőleges görgető és próbálja görgessen a lap aljára. Menü marad a tetején. Ebben az esetben ez lesz az eredeti helyére, amíg görgetve 150 pixel, ami után garantáltan bemegy a bal felső sarokban.