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

Ustawienie scrolla

VPS Starter Arubacloud
0 głosów
656 wizyt
pytanie zadane 28 kwietnia 2016 w JavaScript przez Michał_Warmuz Mądrala (5,830 p.)
Witam. Uczę się JS i jQuery. Mam stworzyć stronę internetową i dodałem do  niej scrolla z filmu Pana Mirosława. Mam problem. Jak ustawić tak aby kiedy jesteśmy na początku strony ten scroll znikł a dopiero jak przesuniemy na dół sie pojawił ? Z góry Dziękuje za pomoc.

JS: https://wklej.to/syz4L

HTML: https://wklej.to/ondUQ

CSS: https://wklej.to/f7Q06

1 odpowiedź

+1 głos
odpowiedź 28 kwietnia 2016 przez kubaapk Nałogowiec (44,270 p.)
wybrane 28 kwietnia 2016 przez Michał_Warmuz
 
Najlepsza
Możesz to zrobić za pomocą offset() z JQ. http://api.jquery.com/offset/

Sprawdź położenie elementu od topa poprzez offset().top i zrób sobie z tym co tam chcesz. Tylko żeby to działało przy scrollowaniu to musisz to wrzucić w event .on("scroll") czy tam .scroll().
komentarz 28 kwietnia 2016 przez Michał_Warmuz Mądrala (5,830 p.)
dzięki za fatygę ale możesz jaśniej Proszę jestem początkującym :)
komentarz 28 kwietnia 2016 przez kubaapk Nałogowiec (44,270 p.)
Za pomocą element.offset().top możesz sprawdzić ile dany element jest "oddalony" od góry.

Jak napiszesz sobie window.offset().top sprawdzisz położenie góry okienka od góry strony, tak łopatologicznie tłumacząc.

Zrób sobie jakąś zmienną np.

var fromtop = window.offset().top;

i później dopisz warunek

Jeżeli odległość wynosi tyle i tyle rób to i to. Np.

if(fromtop > 100) {   /// jesli górna krawędź przeglądarki jest oddalona od początku strony o > 100

 coś tam się dzieje

}  else {

coś tam się dzieje

}

Tylko, żeby to działało podczas scrollowania to musisz obsługiwać listener 'scroll' -> do poczytania tutaj https://developer.mozilla.org/pl/docs/Web/API/Element/addEventListener

W JQ masz element.on("scroll", function(){}) albo element.scroll(function(){})

No i w ten listener upychasz sobie funkcję. Nie chcę pisać wszystkiego wprost, żeby nie podać Ci na tacy rozwiązania tylko zależy mi na tym, żebyś sam popróbował i się nauczył :)

Podobne pytania

0 głosów
2 odpowiedzi 183 wizyt
0 głosów
1 odpowiedź 361 wizyt
pytanie zadane 27 lipca 2016 w JavaScript przez Lopez Początkujący (460 p.)
0 głosów
1 odpowiedź 498 wizyt
pytanie zadane 11 marca 2016 w HTML i CSS przez McShadow Obywatel (1,050 p.)

92,453 zapytań

141,262 odpowiedzi

319,088 komentarzy

61,854 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.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...