JS властивість Element.offsetTop

Загальний опис

offsetTop - це властивість об'єкта Element, яка повертає відстань у пікселях між верхнім краєм елемента та верхнім краєм найближчого батьківського елемента, що має властивість position зі значенням relative, absolute або sticky. Якщо такого батьківського елемента немає, то offsetTop вимірюється відносно документа. Ця властивість корисна для визначення точного розташування елемента стосовно видимої області документа або інших елементів.

Для отримання значення offsetTop елемента потрібно звернутися до відповідної властивості об'єкта HTMLElement. Наприклад, для елемента з id="myElement" можна використати document.getElementById("myElement").offsetTop. Це повернеться числове значення у пікселях.

Властивість offsetTop часто використовується для реалізації різноманітних ефектів прокрутки, таких як "липкі" елементи, паралакс-ефект або анімація прокрутки. Наприклад, можна створити елемент, який "прилипає" до верхньої частини вікна під час прокрутки:

window.addEventListener("scroll", function() {
  const header = document.querySelector("header");
  if (window.pageYOffset > header.offsetTop) {
    header.classList.add("sticky");
  } else {
    header.classList.remove("sticky");
  }
});

У цьому прикладі ми спостерігаємо за подією scroll на об'єкті window. Коли значення window.pageYOffset (відстань прокрутки від верху сторінки) стає більшим за header.offsetTop (відстань від верху сторінки до елемента header), ми додаємо клас sticky до елемента header, що дозволяє застосувати відповідні стилі CSS для "прилипання" елемента.

offsetTop також можна використовувати для визначення, чи є елемент видимим у вікні перегляду. Наприклад:

function isElementInViewport(el) {
  const rect = el.getBoundingClientRect();
  return (
    rect.top >= 0 &&
    rect.left >= 0 &&
    rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
    rect.right <= (window.innerWidth || document.documentElement.clientWidth)
  );
}

const myElement = document.getElementById("myElement");
if (isElementInViewport(myElement)) {
  // Елемент видимий у вікні перегляду
}

У цьому прикладі функція isElementInViewport перевіряє, чи знаходиться елемент el у межах видимої області вікна перегляду, використовуючи метод getBoundingClientRect та властивості offsetTop та offsetLeft. Якщо елемент видимий, можна виконати відповідні дії.

Підсумовуючи, offsetTop є корисною властивістю для визначення точного розташування елементів на веб-сторінці та реалізації різноманітних ефектів прокрутки та анімацій на основі цієї інформації.

правити

Порада

Пам'ятайте, що offsetTop вимірюється відносно найближчого батьківського елемента з position: relative, position: absolute або position: sticky. Якщо такого батьківського елемента немає, то offsetTop вимірюється відносно документа. Це важливо враховувати при роботі з вкладеними елементами або при використанні різних схем позиціонування.

автор: Bond правити

Порада

Комбінуйте offsetTop з іншими властивостями, такими як offsetLeft, offsetWidth та offsetHeight, для отримання повної інформації про розміри та положення елемента. Це може бути корисним для реалізації складних макетів або динамічних ефектів.

const element = document.getElementById('myElement');
const rect = {
  top: element.offsetTop,
  left: element.offsetLeft,
  width: element.offsetWidth,
  height: element.offsetHeight
};

автор: Bond правити

Порада

Для перевірки, чи елемент видимий у вікні перегляду, використовуйте offsetTop разом з іншими властивостями, такими як window.innerHeight або document.documentElement.clientHeight. Це дозволить визначити, чи потрібно виконувати певні дії залежно від видимості елемента.

function isElementInViewport(el) {
  const rect = el.getBoundingClientRect();
  return (
    rect.top >= 0 &&
    rect.bottom <= (window.innerHeight || document.documentElement.clientHeight)
  );
}

автор: Bond правити

+ додати пораду чи нотатку

Синтаксис

Element.offsetTop

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі Серверні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	1	1	3	8	12

Підтримка: мобільні переглядачі

Переглядач
	4.4	18	4	1

Підтримка: серверні переглядачі

Переглядач
	-	-

Приклади

+ запропонувати свій приклад у пісочниці

<button onclick="showOffsetTops()">Показати offsetTop усіх</button>
<p id="output"></p>
<div id="box1" class="box">Бокс 1</div>
<div id="box2" class="box">Бокс 2</div>
<div id="box3" class="box">Бокс 3</div>

.box {
    height: 40px;
    background: #eef6ff;
    margin-bottom: 8px;
}

#output { white-space: pre-line; }

function showOffsetTops() {
    const boxes = document.querySelectorAll('.box');
    let output = '';

    boxes.forEach(box => {
        output += 'offsetTop ' + box.id + ': ' + box.offsetTop + 'px\n';
    });

    document.getElementById('output').textContent = output;
}

<button onclick="showOffsetTop()">Показати offsetTop</button>
<p id="output"></p>
<div id="box">Бокс</div>

#box {
    margin-top: 40px;
    width: 200px;
    height: 60px;
    background: #ccc;
}

function showOffsetTop() {
    const box = document.getElementById('box');
    const output = document.getElementById('output');

    // offsetTop — відстань до верху найближчого позиціонованого предка
    output.textContent = 'offsetTop елемента box: ' + box.offsetTop + 'px';
}