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

Skrypt Javascript - efekt po scrollowaniu

0 głosów
384 wizyt
pytanie zadane 27 sierpnia 2016 w JavaScript, jQuery, AJAX przez nielotweb Bywalec (2,020 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 JSHolic Szeryf (78,700 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 JSHolic Szeryf (78,700 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,020 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 argeento Szeryf (97,260 p.)

Polecam zacząć naukę bez jQuery

komentarz 31 sierpnia 2016 przez nielotweb Bywalec (2,020 p.)
A czemu bez jQuery?
komentarz 31 sierpnia 2016 przez argeento Szeryf (97,260 p.)
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

0 głosów
3 odpowiedzi 158 wizyt
pytanie zadane 8 lipca 2016 w HTML i CSS przez ernest4013 Gaduła (3,280 p.)
0 głosów
2 odpowiedzi 178 wizyt
pytanie zadane 13 czerwca 2016 w JavaScript, jQuery, AJAX przez Alterwar Mądrala (7,280 p.)
Porady nie od parady
Odznacz odpowiedź zieloną fajką, jeśli uważasz, że jest ona najlepsza ze wszystkich i umożliwiła ci rozwiązanie problemu.Najlepsza odpowiedź

64,934 zapytań

111,406 odpowiedzi

234,470 komentarzy

46,767 pasjonatów

Przeglądających: 115
Pasjonatów: 2 Gości: 113

Motyw:

Akcja Pajacyk

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

Oto dwie polecane książki warte uwagi. Pełną listę znajdziesz tutaj.

...