Avatar
Paranormal
Redaktor
Avatar
Paranormal:

Zdravím, začínám se trochu učit JavaScript a jQuery a docela mě zaujalo to že když uživatel scroluje stránku a je vidět jak na tu stránku ze stran najíždí obsah. Ale nevím přesně jak to udělat. Poraťe prosím.

Díky.

Odpovědět 16. dubna 17:50
„Když toho moc neumíme tak jsme na nejlepší pozici se něčemu naučit.“
Avatar
Taskkill
Redaktor
Avatar
Odpovídá na Paranormal
Taskkill:

Dle meho nazoru to postav asi takhle, nakde na strance musis mit element, co bude mit libovolnou vysku ale na sirku musi byt pozicovan tak, aby prilehal na alespon jednu stranu okna, z te strany ze ktere bude neco vyjizdet, nastav mu overflow hidden, abys mohl slidovat i z prava a neroztahovalo ti to obrazovku scrollem.... pak si musis udelat eventlistener na scrollovani po obrazovce, v te funkci na scroll budes jen kontrolovat jestli jsi uz doscrolloval do pozice, ve ktere se objevi napriklad prvnich X pixelu toho slidovaciho DIVu ...

Tak a ted jak urcis pozici toho slidovaciho DIVu, pouzijes vlastnost offsetTop - pozor ale na to, ze ta vraci pouze offset k parentovi ... tedy pokud rodicem slidovaciho divu nebude body, neurcis to spravne, chce to teda napsat rekurzivni funkci, ktera se propocita offsetama az na offset posledniho rodice, co je zaroven potomkem body ... snad je to srozumitelne.

Diky tomuhle ziskas pozici horniho rohu slidovaciho DIVu (muzes k tomu pricist treba tretinu vysky toho divu, aby to neslidovalo moc brzo).

Pomoci vlastnosti window.scrollY zase zjistis kolik uz uzivatel nascrolloval.

Takze jinak receno, jakmile nascrolluje tolik, aby se to shodovalo s offsetem (absolutnim) toho tveho elementu, spustis nejakou smycku a zacnes posouvat obsah slidu do obrazovky, muzes pouzit requestAnimati­onFrame, setInterval (ten spis ne), nebo setTimeout(ten spis, ale ta prvni moznost je mnohem lepsi)...

Samo ze jQuery ma na tohle svoje funkce a property, ale to verim, uz zvladnes dohledat v dokumentaci nebo pomoci googlu.

Pokud bys chtel neco vic rozebrat jen napis. :)

 
Nahoru Odpovědět  +1 16. dubna 18:54
Avatar
Paranormal
Redaktor
Avatar
Odpovídá na Taskkill
Paranormal:

Poprosil bych nějakou praktičtější ukázku pokud možno :) Díky

Nahoru Odpovědět 17. dubna 0:06
„Když toho moc neumíme tak jsme na nejlepší pozici se něčemu naučit.“
Avatar
Taskkill
Redaktor
Avatar
Odpovídá na Paranormal
Taskkill:

https://jsfiddle.net/…ll/y6ewa6n2/ - zascrolluj hodne dolu :)
Snad tohle bude stacit, je to jen pro ukazku, pokud to myslis vazne, budes muset mit jeste spoustu veci na doplneni, napriklad, jakmile vyjedu zase nahoru (byt jenom o kousek), chce to vsechny slidery, ktery uz jsou zase dole pod obrazovkou postavit na svoji defaultni pozici, aby pak mohli zase prijet donekonecna ... a podobne.

Ja tam delam dve zajimavy veci:

  1. getComputedStyle - tim ziskavam styly ze stylopisu, protoze inline style neni nastaveny, tak si ho prenastavim, aby se mi s tim dobre pracovalo.
  2. overflow : hidden ... u sliderovaciho obalu je to nutnost, pokud budes prijizdet zprava, tak abys schoval element za pravej ram obrazovky a pak ho posunul doleva, na to urcite potrebujes zakazat overflow... on by ti jinak napravo a dole, roztahnul body, zejo... a to nechces.

Pokud ale chces nasadit tuhle vec na skutecnej web a ocekavat od toho vykon a spolehlivost, sahni po uexistujicim pluginu knhovne .. treba ja jsem narazil na tohle http://codepen.io/…ne/pen/KiHDa ... a na gitHubu jich budou desitky, ale ja mam pocit, ze tebe spis zajimalo, jak si to udelat po svem ... takze have fun

Editováno 17. dubna 22:47
Akceptované řešení
+20 Zkušeností
+1 bodů
Řešení problému
 
Nahoru Odpovědět 17. dubna 22:46
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 4 zpráv z 4.