Propriedade offsetTop do Elemento DOM HTML

Definição e uso

offsetTop A propriedade retorna a posição superior em relação ao pai (em pixels). Esta propriedade é de leitura only.

O valor retornado inclui:

  • A posição superior do elemento e o margem
  • O padding superior do pai, a barra de rolagem e a borda

Por favor, consulte:Tutorial do modelo de caixa CSS

offsetParent

Todos os elementos de bloco relatam o deslocamento em relação ao pai de deslocamento:

  • offsetTop
  • offsetLeft
  • offsetWidth
  • offsetHeight

O pai de deslocamento é o ancestral mais próximo com posição não estática.

Se o pai de deslocamento não existir, o deslocamento é relativo ao corpo do documento.

Por favor, consulte:

A propriedade offsetLeft

A propriedade offsetWidth

A propriedade offsetHeight

Atributo offsetParent

Atributo clientTop

Atributo clientLeft

Atributo clientWidth

Atributo clientHeight

Exemplo

Exemplo 1

Obtenha a posição offsetTop do "myDIV":

const element = document.getElementById("myDIV");
let pos = element.offsetTop;

Experimente você mesmo

Exemplo 2

Obtenha a posição do "myDIV":

const element = document.getElementById("test");
Let pos1 = element.offsetTop;
let pos2 = element.offsetLeft;

Experimente você mesmo

Exemplo 3

Crie uma navbar adesiva:

// Obtenha o navbar
const navbar = document.getElementById("navbar");
// Obtenha a posição de deslocamento do navbar
const sticky = navbar.offsetTop;
// Adicione a classe sticky ao navbar quando você atingir sua posição de rolagem. Remova a classe sticky ao sair da posição de rolagem.
function myFunction() {
  if (window.pageYOffset >= sticky) {
    navbar.classList.add("sticky")
  }
    navbar.classList.remove("sticky");
  }
}

Experimente você mesmo

Sintaxe

Retorna a posição superior:

element.offsetTop

Retorno

Tipo Descrição
Número Posição superior do elemento, em pixels.

Suporte do navegador

Todos os navegadores suportam element.offsetTop:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Suporte Suporte Suporte Suporte Suporte Suporte