[lady_katarina]

Help ( ͡° ʖ̯ ͡°) chciałam po raz pierwszy zastosować jQuery (robię taki challenge, w którym z pliku psd robię stronkę). Chciałam zrobić tak by po scrollowaniu strony w dół nagłówek się zwężał trochę. Wzięłam jakieś rozwiązanie ze stackoverflow i jak tak patrzę no to rozumiem ten kod i powinno działać, ale nie działa :( Dlaczego? :(

HTML z podpiętym jQuery

CSS

#jquery #naukaprogramowania #frontend

[Viters]

@lady_katarina: Po pierwsze wklejasz kod JS do headera, przez co wykona się on zanim załaduje się DOM. Przenieś kod przed lub opakuj całość w $(function() { twój kod; }); co jest skrótem dla $(document).ready(function() { });

[beeras]

@lady_katarina: jeśli dobrze rozumiem koncept to takie rzeczy lepiej robić poprzez https://api.jquery.com/addclass/ i https://api.jquery.com/removeclass/ i detale poustawiać już sobie w cssach.

[lady_katarina]

@Viters: Niestety to nie pomaga :( w sumie to w ogóle sobie uświadomiłam, że przez brak obrazków średnio można zauważyć o co mi chodzi bo tło pod headerem będzie białe tak samo jak header;p

[Viters]

@lady_katarina: Po drugie .data() jest dosyć szczególną metodą i nie powinnaś raczej używać jej w tym celu. Jeżeli już koniecznie musi to być parametr to jest metoda .prop(). Jednak lepiej skorzystać z .addClass(), .hasClass() i .removeClass(), tak jak napisał @beeras.

[lady_katarina]

@Viters: @beeras: Generalnie powinno to tak wyglądać jak w obrazku i przy scrollowaniu w dół ten nagłówek miał się zwęzić, bo jest za szeroki i przeszkadza w przeglądaniu strony. Wkleiłam jakiego gotowca i podmieniłam dane typu gotowa klasa którą już miałam i height

[Viters]

@lady_katarina: Masz dwa warunki `if data-size == 'big' i if data-size == 'small'`, a nie ustawiasz wartości początkowej data-size na elemencie.
https://jsfiddle.net/hjke4Ldv/

[lady_katarina]

@Viters: ooo okej już rozumiem! :D dziękuję :)

[Viters]

@lady_katarina: A tutaj masz poprawną wersję: https://jsfiddle.net/hjke4Ldv/2/

[lady_katarina]

@Viters: Dziękuję :) faktycznie lepiej to wygląda :D