[N.....N]

#angular #javascript
Jak w TypeScript + Angular zapisać tą funkcję?
Prosta sprawa. Top przeglądarki dochodzi do elementu, dodaje klasę z position: fixed; Ktoś scrolluje wyżej niż jest umieszczony element to wraca do swojej pierwotnej pozycji. Ktoś da jakieś wskazówki? Dodatkowo chciałem użyć debounce, ale są tylko biblioteki których nie mogę używać :x
Znalazłem to -> https://stackoverflow.com/questions/44516017/how-to-handle-window-scroll-event-in-angular-4
ale działa tragicznie.

[nigdywiecejtypie]

@NickciN: Angular to ogolnie gowno jesli chodzi o takie sprawy - mowie to osoba ktora pracuje juz 4 lata jako JavaScript Developer. S---------i nawet takie rzeczy jak renderowanie dzieci robiac to na 10 sposob i dodajac pod to 10 tagow.

Tylko React/Vue ( ͡° ͜ʖ ͡°)

A tutaj mirek w jakiks komponencie bedziesz musial zlapac z pomoca referencji elementy. Zbindowac sie do eventu scroll i nakladac

[N.....N]

@nigdywiecejtypie: no mam komponent w którym chciałbym zapisać ta jedną funkcję. Wszystko działa git, ale chciałem dać fajny efekt wizualny że jak dojedzie do nagłówków tablicy to nagłówki tablicy ida z top przeglądarki żeby była tablica bardziej czytelniejsza. Jak użytkownik cofnie na samą górę to nagłowki wracają płynnie na miejsce :x

Masz jakiś sposób albo tip jak to zrobić najlepiej ?

[nigdywiecejtypie]

@NickciN: Ogolnie jesli to jest jakas strona layoutowa, a nie aplikacja to straszny overill z angularem xD Masz wpietego jakiegos stora? Tak by bylo najprosciej i najglupiej. Wywolywac akcje stora przy scorllu, jakis tam komponent pobiera wartosc stora i ustawia na podstawie jego klase

[N.....N]

@nigdywiecejtypie: użyłem sticky i tako jako działa xd Teraz inna bajka. Może tutaj pomożesz. Jak jest ustawione na 18 w godzinach żeby w minutach było tylko 00 a w innych godzinach mogą być 00/15/30/45

[N.....N]

czyli jest 18 to użytkownik nie wybiera minut, ma 00 i tyle

[nigdywiecejtypie]

@NickciN: a skad wartosci sa pobierane? Moze jakis getter

[mcsQ]

@NickciN: pamiętaj, że scroll to asynchroniczna akcja, czyli co 1px angular uruchamia CI system dytekcji. Debounce to za mało.. Musisz to uruchomić poza ngZone.

Tu masz przykład jak poprawnie obsługiwać window.scroll w Angular
https://stackblitz.com/edit/angular-6r6sm6?file=app/app.component.ts
przeczytaj sobie ten art: https://www.angular.love/2018/03/04/angular-i-zone-js/ jest tutaj to opisane

[mcsQ]

@NickciN: do tego z użyciem ngZone możesz jeszcze użyć z rxjs fromEvent(window, 'scroll') i pipe z debounceTime.

[mcsQ]

@NickciN: a odnośnie co złwego w Twoim kodzie. do addEventListener przekazujesz callback, czyli dobunce musi zwracać funkcję, która wywoła, jeśli ma przyjać parametr. Poczytaj o currying w JS.

Przkyład:
const foo = a => { return a * 2 }; // nie zwracamy funkcji, zle
window.addEventListener('scroll', foo(3));