Propriedade superior do deslocamento do elemento
❮ O Objeto ElementoExemplo
Obtenha a posição offsetTop de um elemento <div>:
var testDiv = document.getElementById("test");
document.getElementById("demo").innerHTML = testDiv.offsetTop;
Definição e uso
A propriedade offsetTop retorna a posição superior (em pixels) em relação ao topo do elemento offsetParent.
O valor retornado inclui:
- a posição superior e a margem do elemento
- o preenchimento superior, barra de rolagem e borda do elemento offsetParent
Nota: O elemento offsetParent é o ancestral mais próximo que tem uma posição diferente de estática.
Dica: Para retornar a posição esquerda de um elemento, use a propriedade offsetLeft .
Suporte ao navegador
Property | |||||
---|---|---|---|---|---|
offsetTop | Yes | 8.0 | Yes | Yes | Yes |
Sintaxe
Retorne a posição de deslocamento superior:
object.offsetTop
Detalhes técnicos
Valor padrão: | sem valor padrão |
---|---|
Valor de retorno: | Um Número, representando a posição superior do elemento, em pixels |
Versão DOM: | CSSOM |
Mais exemplos
Exemplo
Obtenha a posição de um elemento <div>:
var testDiv = document.getElementById("test");
var demoDiv = document.getElementById("demo");
demoDiv.innerHTML = "offsetLeft: " + testDiv.offsetLeft + "<br>offsetTop: " + testDiv.offsetTop;
Exemplo
Crie uma barra de navegação fixa:
// Get the navbar
var navbar = document.getElementById("navbar");
//
Get the offset position of the navbar
var sticky = navbar.offsetTop;
// Add the sticky class to the navbar when you reach its scroll position.
Remove the sticky class when you leave the scroll position.
function myFunction() {
if (window.pageYOffset
>= sticky) {
navbar.classList.add("sticky")
}
else {
navbar.classList.remove("sticky");
}
}
❮ O Objeto Elemento