Si quieres lanzar una función de JavaScript cuando se muestre una etiqueta de HTML… ¡Estas de suerte! Con el nuevo API Observables evitarás cálculos innecesarios como comprobar la posición del elemento DOM. Te enseño lo fácil que es implementarlo en la actualidad, sin recurrir al evento de scroll (scrollTop) u otras técnicas que malgastan la CPU del equipo.

DEMO

HTML y CSS

Antes hay que definir el elemento que queremos usar como disparador. Cuando sea visible en el viewport, o entre en la zona visible por el ojo del visitante, es cuando lanzaremos el código.

El HTML del ejemplo anterior es un sencillo <div>.

<div class="cuadrado"></div>

Y su CSS contiene .cuadrado que le da forma y .cuadrado--rota que será añadido cuando sea visible dando la animación de rotación.

.cuadrado {
  border: .2rem solid black;
  width: 10rem;
  height: 10rem;
  transition: 2s;
  margin: 0 auto;
  margin-top: 100rem;
  margin-bottom: 5rem;
}

.cuadrado--rota {
  transform: rotate(45deg);
}

Javascript

Llega el momento de usar Observable.

// Capturamos el elemento que deseamos observar
const miCuadrado = document.querySelector('.cuadrado');

// Creamos un objeto IntersectionObserver
const observerCuadrado = new IntersectionObserver((entries) => {
      // Comprobamos todas las intesecciones. En el ejemplo solo existe una: cuadrado
      entries.forEach((entry) => {
          // Si es observable, entra
          if (entry.isIntersecting) {
             // Añadimos la clase '.cuadrado--rota'
             miCuadrado.classList.add('cuadrado--rota');
          } else {
             // En caso contrario quita la clase
             miCuadrado.classList.remove('cuadrado--rota');
          }
      });
  });

// Añado a mi Observable que quiero observar. En este caso el cuadrado
observerCuadrado.observe(miCuadrado);

Puedes simplificar la tarea usando FFNM, una herramienta propia que me ayuda a aplicar la misma lógica sin repetirme.