Как получить расстояние от вершины для элемента?

Ответ 1

offsetTop только смотрит на родительский элемент. Просто пройдите через родительские узлы до тех пор, пока вы не закончите родителей и не соедините их смещения.

function getPosition(element) {
    var xPosition = 0;
    var yPosition = 0;

    while(element) {
        xPosition += (element.offsetLeft - element.scrollLeft + element.clientLeft);
        yPosition += (element.offsetTop - element.scrollTop + element.clientTop);
        element = element.offsetParent;
    }

    return { x: xPosition, y: yPosition };
}

Ответ 2

Используйте offsetTop

document.getElementById("foo").offsetTop

демонстрация

Ответ 3

Вот вам интересный код:)

window.addEventListener('load', function() {
  //get the element
  var elem = document.getElementById('test');
  //get the distance scrolled on body (by default can be changed)
  var distanceScrolled = document.body.scrollTop;
  //create viewport offset object
  var elemRect = elem.getBoundingClientRect();
  //get the offset from the element to the viewport
  var elemViewportOffset = elemRect.top;
  //add them together
  var totalOffset = distanceScrolled + elemViewportOffset;
  //log it, (look at the top of this example snippet)
  document.getElementById('log').innerHTML = totalOffset;
});

#test {
  width: 100px;
  height: 100px;
  background: red;
  margin-top: 100vh;
}
#log {
  position: fixed;
  top: 0;
  left: 0;
  display: table;
  background: #333;
  color: #fff;
}
html,
body {
  height: 2000px;
  height: 200vh;
}

<div id="log"></div>
<div id="test"></div>

Ответ 4

var distanceTop = element.getBoundingClientRect().top;

Для подробностей смотрите ссылку:

https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect

Ответ 5

var elDistanceToTop = window.pageYOffset + el.getBoundingClientRect().top

По моему опыту document.body.scrollTop не всегда возвращает текущую позицию прокрутки (например, если прокрутка фактически происходит в другом элементе).

Ответ 6

(SOURCE: Определить расстояние от вершины div до вершины окна с помощью javascript)

<script type="text/javascript">
var myyElement = document.getElementById("myyy_bar");  //your element
var EnableConsoleLOGS = true;                          //to check the results in Browser Inspector(Console), whenever you are scrolling



// ==============================================
window.addEventListener('scroll', function (evt) {
    var Positionsss =  GetTopLeft ();  
    if (EnableConsoleLOGS) { console.log(Positionsss); }
});
function GetOffset (object, offset) {
    if (!object) return;
    offset.x += object.offsetLeft;       offset.y += object.offsetTop;
    GetOffset (object.offsetParent, offset);
}
function GetScrolled (object, scrolled) {
    if (!object) return;
    scrolled.x += object.scrollLeft;    scrolled.y += object.scrollTop;
    if (object.tagName.toLowerCase () != "html") {          GetScrolled (object.parentNode, scrolled);        }
}

function GetTopLeft () {
    var offset = {x : 0, y : 0};        GetOffset (myyElement, offset);
    var scrolled = {x : 0, y : 0};      GetScrolled (myyElement.parentNode, scrolled);
    var posX = offset.x - scrolled.x;   var posY = offset.y - scrolled.y;
    return {lefttt: posX , toppp: posY };
}
// ==============================================
</script>

Ответ 7

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

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

// Our element
var elem = document.querySelector('#some-element');

// Set our distance placeholder
var distance = 0;

// Loop up the dom
do {
    // Increase our distance counter
    distance += elem.offsetTop;

    // Set the element to it parent
    elem = elem.offsetParent;

} while (elem);
distance = distance < 0 ? 0 : distance;

Оригинальный код от https://gomakethings.com/how-to-get-an-elements-distance-from-the-top-of-the-page-with-vanilla-javascript/

Ответ 8

выделите верхнюю позицию элемента;

var rect = element.getBoundingClientRect();
var offsetTop = window.pageYOffset + rect.top - rect.height;

Ответ 9

Простой ванильный путь:

document.querySelector('your-element').getBoundingClientRect().top

Ответ 10

Хотя это довольно старая дискуссия, но она хорошо работает в браузерах chrome/firefox/safari:

window.addEventListener('scroll', function() {
   var someDiv = document.getElementById('someDiv');
   var distanceToTop = someDiv.getBoundingClientRect().top;
});

Проверьте это на JSFiddle

Ответ 11

Использование jQuery offset() метод:

$(element).offset().top

Пример: http://jsfiddle.net/yZGSt/3/