• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

One page- skrollowanie strony do kolejnej sekcji z jednym dużym tłem

Cloud VPS
0 głosów
175 wizyt
pytanie zadane 22 października 2016 w JavaScript przez Napromieniowany Użytkownik (570 p.)
edycja 22 października 2016 przez ScriptyChris

Witam. Bardzo prosiłbym o pomoc/porade w stworzeniu gładkiego przejscia podczas skrolowania do danej sekcji. Przy czym sekcja nr. 1 posiada swoj osobny background, a pozostałe 2, 3 i 4 posiadają jeden wspolny duzy background (przykladowo o wysokosci 300vh).  
 

<div class="section custom-full1">1</div>
<main>
  <div class="section">2</div>
  <div class="section">3</div>
  <div class="section">4</div>
</main>



Mainowi chciałbym dać background o wysokosci 300vh w taki sposob aby sekcja nr.2  wyswietlala tylko 100vh backgrounda, sekcja nr.3 od 100vh do 200vh, sekcja nr.4 od 200vh do 300vh.
Niestety w tym przypadku main blokuje skrolowanie (http://codepen.io/anon/pen/zKZYqp).

Prosze o poradę, z góry dziękuję :)

Edit:
 

http://jsfiddle.net/omarqa/dY44L/1/

W jaki sposob przerobić kod js aby zamiast zdarzenia onclick występowalo zdarzenie scrollowania? Być moze to bedzie najłatwiejsze rozwiązanie problemu?

Pozdrawiam

Zaloguj lub zarejestruj się, aby odpowiedzieć na to pytanie.

Podobne pytania

0 głosów
1 odpowiedź 279 wizyt
pytanie zadane 10 grudnia 2016 w HTML i CSS przez ShadoWs Bywalec (2,800 p.)
0 głosów
1 odpowiedź 241 wizyt
pytanie zadane 14 listopada 2016 w HTML i CSS przez Konrad Polit Początkujący (410 p.)
0 głosów
2 odpowiedzi 498 wizyt
pytanie zadane 20 lutego 2018 w JavaScript przez Vromix Początkujący (410 p.)

93,483 zapytań

142,417 odpowiedzi

322,763 komentarzy

62,895 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj

Kursy INF.02 i INF.03
...