Elemento offsetTop Propiedad
❮ El Objeto ElementoEjemplo
Obtenga la posición offsetTop de un elemento <div>:
var testDiv = document.getElementById("test");
document.getElementById("demo").innerHTML = testDiv.offsetTop;
Definición y uso
La propiedad offsetTop devuelve la posición superior (en píxeles) relativa a la parte superior del elemento offsetParent.
El valor devuelto incluye:
- la posición superior y el margen del elemento
- el relleno superior, la barra de desplazamiento y el borde del elemento offsetParent
Nota: El elemento offsetParent es el ancestro más cercano que tiene una posición distinta a la estática.
Sugerencia: para devolver la posición izquierda de un elemento, use la propiedad offsetLeft .
Compatibilidad con navegador
| Property | |||||
|---|---|---|---|---|---|
| offsetTop | Yes | 8.0 | Yes | Yes | Yes |
Sintaxis
Devuelve la posición de desplazamiento superior:
object.offsetTop
Detalles técnicos
| Valor por defecto: | sin valor predeterminado |
|---|---|
| Valor de retorno: | Un número, que representa la posición superior del elemento, en píxeles |
| Versión DOM: | CSSOM |
Más ejemplos
Ejemplo
Obtenga la posición de un elemento <div>:
var testDiv = document.getElementById("test");
var demoDiv = document.getElementById("demo");
demoDiv.innerHTML = "offsetLeft: " + testDiv.offsetLeft + "<br>offsetTop: " + testDiv.offsetTop;
Ejemplo
Cree una barra de navegación pegajosa:
// 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");
}
}
❮ El Objeto Elemento