NOVINKA! E-learningové kurzy umělé inteligence. Nyní AI za nejlepší ceny. Zjisti více:
NOVINKA – Víkendový online kurz Software tester, který tě posune dál. Zjisti, jak na to!
Avatar
Verquido
Tvůrce
Avatar
Verquido:16.4.2016 17:50

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.4.2016 17:50
Avatar
Odpovídá na Verquido
Neaktivní uživatel:16.4.2016 18:54

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
16.4.2016 18:54
Neaktivní uživatelský účet
Avatar
Verquido
Tvůrce
Avatar
Odpovídá na Neaktivní uživatel
Verquido:17.4.2016 0:06

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

 
Nahoru Odpovědět
17.4.2016 0:06
Avatar
Odpovídá na Verquido
Neaktivní uživatel:17.4.2016 22:46

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.4.2016 22:47
Akceptované řešení
+20 Zkušeností
+2,50 Kč
Řešení problému
Nahoru Odpovědět
17.4.2016 22:46
Neaktivní uživatelský účet
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.