Cómo saber si un elemento está en el viewport con Javascript

Para saber si un elemento está dentro del viewport tienes un método de los elementos del DOM que se llama getBoundingClientRect. Este método te da una cantidad de propiedades interesantes mediante las cuales puedes calcular si está o no en el viewport un elemento de la página.

var elem = document.getElementById('elemento');
var clientRect = elem.getBoundingClientRect();

Ahora, en el objeto clientRect tendrás diversos datos desde los que puedes obtener mucha información sobre dónde está situado un elemento. Este objeto te va a dar propiedades con valores como estos:

bottom: 1036.4375
height: 37
left: 8
right: 519
top: 999.4375
width: 511
x: 8
y: 999.4375

Dentro de esas propiedades puedes usar clientRect.top y clientRect.bottom para saber la distancia que hay desde la parte de arriba del área visible del documento hasta el elemento y la distancia que hay desde la parte de abajo del área visible documento hasta el elemento.

Si tienes en cuenta además el tamaño de la ventana del navegador (que puedes calcular con las propiedades window.innerHeight o document.documentElement.clientHeight), podrás decir si la distancia que tienes en top y bottom es compatible con que el elemento se encuentre en el viewport en un momento dado.

Función Javascript para saber si un elemento está en el viewport

Esta función Javascript te indicará si un elemento que recibes por parámetro está o no en el viewport.

function isInViewport(elem) {
    var distance = elem.getBoundingClientRect();
    return (
        distance.top < (window.innerHeight || document.documentElement.clientHeight) && distance.bottom > 0
    );
}

Para usarla tienes que acceder primero a un elemento del DOM:

var elem = document.getElementById('elemento');

A continuación puedes simplemente preguntar si está o no dentro del viewport con una invocación a la función, indicando por parámetro el objeto del DOM que queremos verificar.

if (isInViewport(elem)) {
    // está en el viewport
}