Zadanie na dziś. Element na stronie, przykładowo menu, po zeskrolowaniu okna przeglądarki, ma przykleić się do górnej części ekranu.
Zaczynamy od stworzenia dyrektywy, bo przy takim rozwiązaniu stworzymy mechanizm, który będzie reużywalny, czyli mogli go wykorzystać przy nie jednym elemencie na stronie. Niech nasza dyrektywa kryje się pod nazwą appScrollingElem.

Co jest w naszej dyrektywie?

Konieczne jest zaimportowanie  ElementRef i Renderer w celu wykonywania operacji na elementach. Następnie tworzymy funkcję  checkScrolling(), która sprawdza czy nasze menu powinno już “przykleić się” do ekranu. Jeśli tak, zostanie dodana mu klasa fixed-position.
Słów kilka o funkcji checkScroling(). Za dodanie lub usunięcie klasy fixed-position odpowiada this.renderer.setElementClass(this.el.nativeElement, ‘fixed-position’, classToAdd). Jak widzimy wykorzystana jest tu zmienna classToAdd , której wartość (true lub false) jest przypisywana jest po sprawdzeniu warunku określającego położenie elementu względem okna. Zapis this.renderer.setElementClass(this.el.nativeElement, ‘fixed-position’, true) doda klasę fixed-position, a this.renderer.setElementClass(this.el.nativeElement, ‘fixed-position’, false) – usunie.
Dodatkowo w  ngAfterViewInit  tworzymy obserwator dla scrollowania ekranu (fromEvent  – niezbędny jest import) i optymalizujemy ilość wywołań funkcji checkScrolling z pomocą debounceTime (również konieczny jest import). Dlaczego? Zmieniejszenie liczby obliczeń, do których zmuszamy stronę, a które nie są konieczne.
scrolling.directive.ts

Użycie dyrektywy

Teraz użycie. Oczywiście najpierw import w providers modułu, a potem dosłownie dodanie jednego słowa w kodie html – appScrollingElement.

Dodamy klasę do elementu i co dalej?

Ostatni krok: style. Musimy określi, jak ma się zachować nasz element, gdy otrzyma klasę fixed-position.

Gotowe 🙂

Author: