Grazie ai progressi fatti da HTML5 e CSS3, i design dei siti web sono sempre più articolati e ricchi di animazioni. Le media query sono uno dei cardini cardine di questa bellezza in quanto ci permettono di riscrivere gli stili al cambiamento delle dimensioni del viewport.

Tuttavia, a volte è necessario modificare lo stile durante lo scroll sulla pagina, in questo caso dobbiamo basarci sugli eventi emessi dal DOM e agire di conseguenza. E' in questo contesto che andremo a creare una direttiva Angular che intercetti lo scroll sulla pagina e renda un elemento sticky se questo tocca il bordo della viewport.

Il primo step consiste nell'inizializzare tutto ciò che ci servirà: una posizione di default, l'elemento a cui la direttiva è associata e il servizio Renderer2 che astrae le operazioni sul DOM.

elementPosition = 999;
constructor(@Self() private hostElement: ElementRef, private renderer: Renderer2) {}

Passiamo quindi alla valorizzazione dei parametri minimi che ci consentiranno di modificare lo stile dell'elemento.

ngAfterViewInit(): void {
  this.elementPosition = this.hostElement.nativeElement.offsetTop;
  this.renderer.setStyle(this.hostElement.nativeElement, 'z-index', '10');
  this.renderer.setStyle(this.hostElement.nativeElement, 'top','0');
}

Come ultimo step, intercettiamo l'evento di scroll emesso dal DOM e impostiamo lo stile sticky.

@HostListener('window:scroll', ['$event'])
handleScroll() {
  const windowScroll = window.pageYOffset;

  if (windowScroll >= this.elementPosition) {
    this.renderer.setStyle(this.hostElement.nativeElement, 'position','sticky');
  } else {
    this.renderer.removeStyle(this.hostElement.nativeElement, 'position','static');
  }
}