J'ai besoin de trouver la distance entre l'élément et le bas de la fenêtre du navigateur

Contrairement à d'autres systèmes de coordonnées dans le navigateur est du haut vers le bas, cela signifie haut du navigateur est y=0.

Il y a deux élément du DOM de la propriété pour obtenir la position d'un élément sur la page. Les propriétés sont element.offsetTop et element.offsetHeight

Vous pouvez calculer l'espace entre votre élément et en bas de la page par le calcul de element.offsetTop et window.innerHeight.

var space = window.innerHeight - element.offsetTop

si vous voulez calculer l'espace entre le bas de vos éléments et en bas de la fenêtre, puis vous devez ajouter votre hauteur d'élément trop.

var space = window.innerHeight - element.offsetTop + element.offsetHeight

Ce calcul est parfois nécessaire. Pensez que vous avez pour cent de positionnement et vous voulez connaître la position de votre élément en pixels de faire quelque chose. Par exemple, vous avez un div positionné comme ceci:

div{
    width:300px;
    height:16.2%;
    position:absolute;
    top: 48.11%;
    border:3px dotted black;
}

Alors vous voulez savoir quand le div est près de la fenêtre du navigateur pour changer la couleur:

var div = document.querySelector('div'),
    space = innerHeight - div.offsetTop + div.offsetHeight;

 window.onresize = function(){
    space = innerHeight - div.offsetTop + div.offsetHeight;
    if(space < 200){
        div.style.background = 'blue';
    }
};

Violon