Skrypt Javascript - efekt po scrollowaniu

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

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 27 sierpnia 2016 przez niezalogowany

} else if ($(this).scrollTop() < 300) {

samo else wystarczy

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

Masz rację, ale na wypadek gdyby autor chciał zrobić później kilka animacji dla różnych wartości scrolla, to else if jak najbardziej wtedy będzie pasować.

komentarz 27 sierpnia 2016 przez niezalogowany

Wtedy to już kompletnie bez sensu.

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

Dlaczego?

komentarz 27 sierpnia 2016 przez niezalogowany

jak da dalej np. scroll < 500 to już się nie wykona, ponieważ spełniony będzie warunek scroll < 300

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

A, co gdy zechce zrobić coś takiego:

if ($(this).scrollTop() <= 300) {
  /*  ... */
} else if ($(this).scrollTop() > 300 && $(this).scrollTop() <= 450) {
  /*  ... */
} else if ($(this).scrollTop() > 450 && $(this).scrollTop() <= 600) {
 /* ... */
}

Dobrze już. Moim zdaniem sprzeczamy się o detal :)

komentarz 27 sierpnia 2016 przez niezalogowany

Niby tak - tylko trzeba się z kolejnością pilnować.

A co jeśli chciałby zrobić tak? Od razu ograniczasz się pierwszym warunkiem

if ($(this).scrollTop() <= 300) {
  /*  ... */
} else if ($(this).scrollTop() > 250 && $(this).scrollTop() <= 450) {
  /*  ... */
}

1	komentarz 27 sierpnia 2016 przez niezalogowany Btw, sprawdzając kilka razy scrollTop, który się nie zmienia - warto zapakować go do zmiennej. Operacje na DOM są kosztowne - http://codepen.io/Argeento/pen/wWVJaA

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

Autor zadał pytanie o sposób w jaki ma sobie rozdzielić animacje dla różnych wartości scrolla. Nie pytał ani o radę dot. użycia jQuery vs VanillaJS (a jest spora różnica w szybkości działania) ani o to, czy jego kod jest optymalny - pytał o sam warunek, więc na to pytanie mu odpowiedziałem.

Nie mniej jednak, fajny test napisałeś.

komentarz 27 sierpnia 2016 przez nielotweb Bywalec (2,240 p.)

dziękuje za pomoc, posłużyłem się twoim kodem @Krzycho92 czyli on jest taki:

$(window).scroll(function() {
  if ($(this).scrollTop() > 300) {
    $('.navbar-inverse').animate({
      padding: '15px 22px',
      minHeight: '30px'
    }, 150);
  } else if ($(this).scrollTop() < 300) {
    $('.navbar-inverse').animate({
      padding: '25px 45px',
      minHeight: '100px'
    }, 150);
  }
});

A demo możecie tutaj zobaczyć:

http://nielotwebforsa.ct8.pl/inver/index.html

Sami zobaczcie co jest źle. Działa ale jest kilka błędów. Pierwszy to że zmiana z jednego z drugiego przechodzi za długo, czyli przejście z jednej fazy na drugą trwa za długo.. wiem ustawione jest 150, ale to powinnien być czas animacji a nie przejścia z jednego na drugi.

A drugi problem tkwi w tym że jak będziemy energicznie scrollować z góry na dół, przekracać te 300px - to wtedy zrobi się 'bug' i animacja będzie się powtarzać tyle razy ile razy scrollowaliśmy, tzn. scrolluje energicznie 20 razy z góry na dół po czym ta belka navbar zmienia swoje właściwości 20razy i to trwa długoo.. i to strasznie źle wygląda. Muszę zrobić tak że skrypt po scrollowaniu w dół wyłączał ten drugi skrypt żeby to razem ze sobą współgrało! :D

Da się to w jakiś sposób uzyskać?

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

A drugi problem tkwi w tym że jak będziemy energicznie scrollować z góry na dół, przekracać te 300px - to wtedy zrobi się 'bug' i animacja będzie się powtarzać tyle razy ile razy scrollowaliśmy, tzn. scrolluje energicznie 20 razy z góry na dół po czym ta belka navbar zmienia swoje właściwości 20razy i to trwa długoo.. i to strasznie źle wygląda.

To może być spowodowane tym, o czym wspomniał Argeento - zapisz odwołanie się do scrollTop() elementu do zmiennej i ją sprawdzaj w IF.

komentarz 27 sierpnia 2016 przez nielotweb Bywalec (2,240 p.)

@Krzycho92, niestety nie rozumiem ;d Mógłbyś mi to bardziej rozjaśnić? Sory że tak się czepiam ale dopiero się uczę

komentarz 27 sierpnia 2016 przez nielotweb Bywalec (2,240 p.)

A dałoby radę tak że po scrollowani'u tych 300px zmienić poprostu class'ę na inną class'ę z innym padding'iem itd.? Z animacją żeby to płynnie przechodziło

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

@nielotweb, Argeento dał przykład na Codepen.

Wrzuć $(this).scrollTop() do zmiennej i ją w IF sprawdzaj.

A dałoby radę tak że po scrollowani'u tych 300px zmienić poprostu class'ę na inną class'ę z innym padding'iem itd.? Z animacją żeby to płynnie przechodziło

Tak. Dziwie się, że wcześniej o tym nie pomyślałeś :) Tylko to raczej nie będzie mieć wpływu na szybkość. Raczej na zmniejszenie powtarzalności się tego samego w kodzie.

komentarz 27 sierpnia 2016 przez nielotweb Bywalec (2,240 p.)

@Krzycho92, dobra dzięki wielkie, spróbuję z tymi zmianami class pokombinować. Jutro jak coś to napiszę czy mi się udało.

komentarz 28 sierpnia 2016 przez nielotweb Bywalec (2,240 p.)

Dobra zrobiłem! Działa tak jak chciałem! :) bez żadnych problemów, np. już nie ma tego problemu że po energetycznym scrollowaniu kilka razy animacja się powtarza :)

$(window).scroll(function() {
  if ($(this).scrollTop() > 300) {
    $('.navbar-inverse').addClass('yourClass');
  } else if ($(this).scrollTop() < 300) {
    $('.navbar-inverse').removeClass( "yourClass" );
  }
});

A animacje zrobiłem w css'ie. ( demo: http://nielotwebforsa.ct8.pl/inver/index.html )

Mam jeszcze jedno szybkie pytanko @Krzycho92 - znasz może jakieś strony bądź dobre książki do nauki Javascript'u ? ( początkujący )

Wielkie dzięki Argeento i Krzycho92 :)

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

Ale nadal w IF odnosisz się do metody scrollTop() elementu zamiast umieścić ją w zmiennej i odnosić się do tej zmiennej.

Mam jeszcze jedno szybkie pytanko @Krzycho92 - znasz może jakieś strony bądź dobre książki do nauki Javascript'u ? ( początkujący )

Proszę Cię, na forum jest tego multum:

http://forum.pasja-informatyki.pl/search?q=kursy+javascript

http://forum.pasja-informatyki.pl/search?q=kursy+css

, polecany temat: http://forum.pasja-informatyki.pl/19205/jak-sie-uczyc-html5-css3-i-js?show=122385#a122385

komentarz 28 sierpnia 2016 przez nielotweb Bywalec (2,240 p.)

''Ale nadal w IF odnosisz się do metody scrollTop() elementu zamiast umieścić ją w zmiennej i odnosić się do tej zmiennej.'' Dobra chyba już rozumiem, ale co to da, co to ma zmienić?

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

Przecież Argeento już to wyjaśnił wyżej i nawet zapodał test:

Btw, sprawdzając kilka razy scrollTop, który się nie zmienia - warto zapakować go do zmiennej. Operacje na DOM są kosztowne - http://codepen.io/Argeento/pen/wWVJaA

komentarz 28 sierpnia 2016 przez nielotweb Bywalec (2,240 p.)

Nie wychodzi mi :/ chyba coś źle zrozumiałem:

$(window).scroll(function() {

  var scroll = $(this).scrollTop();

  if scroll > 300 {
    $('.navbar-inverse').addClass('distance');
  } 
  else if scroll < 300 {
  $('.navbar-inverse').removeClass( "distance" );

  }
});

Co ja tu źle robię?

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!