Animar un componente basado en la posicion del scroll Angular 4+

Hay muchas paginas que cuando haces scroll y llega a cierta posición los elementos cambian o te siguen para este caso el menu te seguirá cuando el scroll halla avanzado hasta que ya no se ve y despues se seguirá viendo y una vez que vayas hacia atras volverá a la posición inicial.

Para este ejemplo utilizaremos HostListener que nos ayudará a rastrear la posición del componente recuerden que este ejemplo es para Angular 4+ yo lo probe en Angular 5 y si funciona correctamente.

primero importamos HostListener y ElementRef en nuestro componente para luego implementar la funcionalidad, y también importamos los elementos de para animaciones de angular/animations esto es para cambiar el style una vez que el scroll llegue al tamaño del elemento.

import { Component, HostListener, ElementRef } from '@angular/core';

import {
  trigger,
  state,
  style,
  animate,
  transition
} from '@angular/animations';

Nuestro próximo paso será agregar las “animaciones”, para cambiar los estilos del elemento, yo hice estas pero pueden modificarlas

@Component({
  selector: 'crm-pre-production',
  templateUrl: './pre-production.component.html',
  styleUrls: ['./pre-production.component.css'],
  animations: [
    trigger('scrollAnimation',[
      state('scrolled', style({
        position: 'fixed',
        zIndex: 1,
        width: '100%',
        top: 0,
        backgroundColor: '#fafafa'
      })),
      state('normal', style({
        position: 'relative'
      })),
      transition('scrolled => normal', animate('700ms ease-out')),
      transition('normal => scrolled', animate('700ms ease-in'))
    ])
  ]
})

Lo que hace ahí es definir los estados de las animaciones, cuando esta en normal tiene un estilo y cuando se vuelve scrolled pasa a posición fixed, y el z-index lo trae enfrente y el background se cambia porque se veía transparente, aparte el ancho hace que abarque toda la pantalla y el margen de arriba (top) lo pasa a cero porque quieres el elemento hacia arriba.

export class PreProductionComponent {

  state = 'normal'

  constructor(public el: ElementRef) { }

  @HostListener('window:scroll', ['$event'])
    checkScroll() {
      const componentPosition = this.el.nativeElement.offsetTop
      const scrollPosition = window.pageYOffset

      if (scrollPosition >= componentPosition) {
        this.state = 'scrolled'
      } else {
        this.state = 'normal'
      }

    }

}

El HostListener nos va estar rastreando el evento window:scroll que es cuando se le hace scroll a la pagina entonces despues va a obtener la posición del elemento que queremos que cambie y obtendremos la posición en Y de la ventana, si esta es mayor a la posición del elemento cambiamos el state a ‘scrolled’ si no se queda normal.

Ya por ultimo añadimos a nuestro elemento en este caso un div el evento que se va lanzar para hacer la transición

<div [@scrollAnimation]="state">
...some text here
</div>

y asi queda.