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

Skrypt Javascript - efekt po scrollowaniu

VPS Starter Arubacloud
0 głosów
844 wizyt
pytanie zadane 27 sierpnia 2016 w JavaScript przez nielotweb Bywalec (2,240 p.)

cześć!

Robię stronę i chcę zrobić taki skrypt żeby po scrollowani'u 300px od góry zmienił się padding, background i height navbaru ( górnej belki ). Czyli po zjechaniu 300px od góry zmienią się wartości CSS tego navbaru a gdy pojadę do góry powrócą wcześniejsze wartości.

Kod:

        
        $(window).scroll(function()
        {
            if($(this).scrollTop()>300) $('.navbar-inverse').animate({ padding: '18px 25px', minHeight: '50px', background: '#000' }, 500);     
        }
        );

 

Problem jest w tym że nie wiem jak zrobić, gdy zjedzie 300px z góry to działa ale jak wrócę na górę to chcę żeby wróciły poprzednie wartości. Jak mogę to uzyskać?

2 odpowiedzi

+2 głosów
odpowiedź 27 sierpnia 2016 przez ScriptyChris Mędrzec (190,190 p.)
wybrane 28 sierpnia 2016 przez nielotweb
 
Najlepsza

gdy zjedzie 300px z góry to działa ale jak wrócę na górę to chcę żeby wróciły poprzednie wartości.

Dodaj warunek dla scrollowania w drugą stronę, czyli if ( $(this).scrollTop() < 300​ )

Przykład: http://codepen.io/ChrissP92/pen/ZOgLpv

komentarz 28 sierpnia 2016 przez ScriptyChris Mędrzec (190,190 p.)

if scroll > 300

+

 else if scroll < 300

Nie wiem jak w innych językach dynamicznie typowanych, ale w JavaScript przy if / else if / else stosuje się nawiasy do określenia warunku/ów. Zapomniałeś o nich.

Radzę zacząć zerkać do konsoli, gdy coś nie działa i wdrożyć do swoich projektów tryb strict.

komentarz 28 sierpnia 2016 przez nielotweb Bywalec (2,240 p.)
@Krzycho92, rzeczywiście! O tych nawiasach zapomniałem.. :D

Tak, teraz będę sprawdzał konsolę zawsze i zaraz poczytam o tym trybie strict, bo jeszcze o nim nie słyszałem ;-)

I już zrozumiałem czemu to pod zmienną należy pakować a potem w IF sprawdzać!

 

To w sumie chyba tyle, skrypt działa jak należy - a ja idę się uczyć JS'a, bo podoba mi się, trochę trudny język ale pewnie kiedyś dojdę do jakiegoś poziomu..

Jeszcze raz wielkie dzięki!
1
komentarz 29 sierpnia 2016 przez niezalogowany

Polecam zacząć naukę bez jQuery

komentarz 31 sierpnia 2016 przez nielotweb Bywalec (2,240 p.)
A czemu bez jQuery?
komentarz 31 sierpnia 2016 przez niezalogowany
1. Nauka od podstaw,
2. Jak zaczniesz z jQuery - nie będziesz umiał nic bez niego napisać, co jest równoważne, z nieznajomością JS
+2 głosów
odpowiedź 27 sierpnia 2016 przez niezalogowany
$(window).scroll(function()
{
    if($(this).scrollTop()<300) $('.navbar-inverse').removeAttr('style');    
}
);

To spowoduje usunięcie atrybutu style elementu bo animate dodaje. 

Podobne pytania

+1 głos
1 odpowiedź 285 wizyt
pytanie zadane 5 lutego 2016 w HTML i CSS przez Jakub Wróbel Użytkownik (920 p.)
0 głosów
1 odpowiedź 197 wizyt

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!

...