Skrypt Javascript - efekt po scrollowaniu

Question

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ć?

Answer 1

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

Comments

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.

---

@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!

---

Polecam zacząć naukę bez jQuery

---

A czemu bez jQuery?

---

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

Answer 2

$(window).scroll(function()
{
    if($(this).scrollTop()<300) $('.navbar-inverse').removeAttr('style');    
}
);

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