Cette démo montre comment appliquer un effet à un élément d'une page en fonction de sa visibilité à l'écran (ici, on décale de 200 pixels pour voir l'effet en haut et en bas de la page)

Dans la balise body, on appelle OnScrollDiv() pour le onscroll et le onload. Puis on utilise getBoudingClientRect et window.innerHeight pour déterminer si le Rect de l'élément est dans la partie visible de la page ou pas.

function OnScrollDiv() {
    var elems = document.getElementsByClassName('lazy');
    var el = elems[0];
    for (var i=0, nb=elems.length ; i <nb ; i++, el = elems[i]) {
        var rect = el.getBoundingClientRect();
        var isVisible = ((rect.top - window.innerHeight) < 0-200 && (rect.bottom) > 200 ) ? true : false ;
        el.style.backgroundColor = (isVisible) ? 'blue' : 'red';
    }
}