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 є корисною властивістю для визначення точного розташування елементів на веб-сторінці та реалізації різноманітних ефектів прокрутки та анімацій на основі цієї інформації.

Синтаксис

Element.offsetTop

Значення

Return

Переглядачі

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

Приклади

• Приклад 1
• Приклад 2
• Приклад 3

<div id="box" style="position: absolute; left: 50px; top: 100px; width: 200px; height: 100px; background-color: #ccc;">
  Це бокс
</div>
<button onclick="showOffsetTop()">Показати offsetTop</button>
<p id="output"></p>

<script>
function showOffsetTop() {
  const box = document.getElementById('box');
  const offsetTop = box.offsetTop; // Отримуємо значення offsetTop
  const output = document.getElementById('output');
  output.textContent = `offsetTop елемента "box": ${offsetTop}px`; // Виводимо значення
}
<script>

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

<script>
function showOffsetTops() {
  const boxes = document.querySelectorAll('.box');
  let output = '';
  boxes.forEach(box => {
    const offsetTop = box.offsetTop;
    output += `offsetTop елемента "${box.id}": ${offsetTop}px\n`;
  });
  document.getElementById('output').textContent = output;
}
<script>