Autor Zpráva
Milkys
Profil
Čest práci všem,
mohl by mi prosím někdo vysvětlit na základě čeho se baner vpravo "rozjede" nebo "zastaví". Zde je ukázka:
ukázka

Asi js tam mění position na absolute nebo fixed.

Zajímalo by mně jak script pozná místo kdy to změnit.

Stačí i odkaz kde o podobném "mechanizmu" píší.
Děkuji za reakce.
soucekgns
Profil
Milkys:
Asi js tam mění position na absolute nebo fixed.
přesně tak:)

komplexní kód s jquery je zde jquery-scrollspy
jinak zkus něco odsud, asi scrollTop nebo offsetTop
Str4wberry
Profil
JS umí zjistit počet pixelů o kolik je odrolováno (scrollTop) a počet pixelů odshora daného elementu* (offsetTop). Tyto hodnoty stačí při window.onscroll porovnat a podle toho stanovit „absolute nebo fixed“.

Před časem jsem vytvořil ukázku.

*) Ten počet se vztahuje k nejbližšímu nadřazenému elementu s nastavenou posicí.
Milkys
Profil
soucekgns:
jquery kvůli tomu nebudu používat, zkusím mrknout na to na druhém ř.
Děkuji.


Str4wberry:
BINGO, to je ono, hned kouknu na ukázku.
Mockrát děkuji.
Milkys
Profil
Str4wberry:
funguje to dobře akorát se spodek bočního sidebaru nezastaví nad patičkou. Dá se to bez jquery? Čím se to dá udělat? Co mám hledat?
Str4wberry
Profil
Dá se to bez jquery?
Bez jQuery se dá udělat vše. Je to jen JS framework, který z podstaty (je psaný v JS) nemůže nic navíc umět.

Udělat to samozřejmě lze. Stačí vymyslet stav, při kterém se má boční sloupec zastavit.
Milkys
Profil
Str4wberry:
Stačí vymyslet stav, při kterém se má boční sloupec zastavit.
Jakmile spodní okraj divu "sidebar" narazí na horní okraj divu "paticka".
Milkys
Profil
Jak poznám, že se tak stalo?
Potom už asi vím jak dál - v tom okamžiku nastavím divu sidebar position: relative a do top: výška po patičku minus výška div sidebar pomocí js.
Milkys
Profil
Str4wberry:
JS umí zjistit počet pixelů o kolik je odrolováno (scrollTop) a počet pixelů odshora daného elementu* (offsetTop). Tyto hodnoty stačí při window.onscroll porovnat a podle toho stanovit ‚absolute nebo fixed‘.

Tohle pomohlo, vyřešeno. Děkuji Str4wberry.

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: