Мне нужно найти расстояние между элементом и нижней частью окна браузера

Ответ 1

В отличие от других систем, координаты в браузере сверху вниз, это означает, что верхняя часть браузера y = 0.

Существует два свойства элемента DOM для получения позиции элемента на странице. Свойства element.offsetTop и element.offsetHeight

Вы можете рассчитать пространство между вашим элементом и нижней частью страницы, вычислив element.offsetTop и window.innerHeight.

var space = window.innerHeight - element.offsetTop

если вы хотите вычислить пространство между дном вашего элемента и нижней частью окна, вам также нужно добавить высоту элемента.

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

Этот расчет иногда необходим. Думайте, что у вас есть процентное позиционирование, и вы хотите знать положение своего элемента по пикселям, чтобы что-то сделать. Например, у вас есть div, расположенный вот так:

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

Затем вы хотите узнать, когда div находится рядом с окном браузера, чтобы изменить его цвет:

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';
    }
};

Fiddle

Ответ 2

Использование element.getBoundingClientRect() - это хороший прямой способ получить смещение нижней части элемента, которая относится к области просмотра, а не к документу. Затем вы можете просто вычесть это значение из window.innerHeight, чтобы вычислить оставшееся пространство между элементом и нижней частью окна браузера (viewport). Как в примере ниже:

var element = document.querySelector('.inner');

window.onscroll = function() {
    var domRect = element.getBoundingClientRect();
    var spaceBelow = window.innerHeight - domRect.bottom;
    
    element.style.background = (spaceBelow < 50 ? 'blue' : 'transparent');
};

body {
  height: 1000px;
}

.outer {
  position: absolute;
  top: 120px;
  border: 1px dashed green;
  width: 95%;
  height: 80px;
}

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

<div class="outer">
  <div class="inner"></div>
</div>