Rögzített kupak görgetés közben
Gyakran a weboldalakat lehet megfigyelni egy fix sapkát. Rögzített header - ez az, amikor görgetni az oldalon, és a sapka helyén nem tűnik ki a fejedből, hogy van, mindig van a tetején, nem számít, milyen messze van lapozzunk lefelé. Ma megnézzük az utat a jQuery 1.7:
header position: relative; header.clone helyzet: fix; body.down header.clone top: 0; Mágikus JS kód: (Funkció ($) < $ (Window). (a "scroll". function () < Ez a technika a klón a fejléc és az eredeti meghagyja a korábbi pozícióját. fromTop> 200 - azt jelenti, ha görgetés 200 pixel, a hozzáadott body class „le”.
Ez egy csomó tartalom, annak érdekében, hogy megjelenítse a függőleges görgető.
szélesség: 100%;
magassága: 60 képpont;
háttér: vörös;
>
top: -60px;
átmenet: 0.2s top könnyű-in;
>
bal: 0;
jobbra: 0;
z-index: 999;
>
$ (Document). kész (funkció () <
var $ header = $ ( "fejléc").
$ Clone = $ fejléc. előtt (. $ header-klón () addClass ( "klón").);
var fromTop = $ (document). scrollTop ();
$ ( "Body"). toggleClass ( "lefelé" (fromTop> 200).);
>);
>);
>) (JQuery);