Atributo offsetTop del elemento DOM HTML

Definición y uso

offsetTop El atributo devuelve la posición superior con respecto al padre (en píxeles). Este atributo es de solo lectura.

El valor de retorno incluye:

  • La posición superior del elemento y el margen
  • La margen superior interna del padre, las barras de desplazamiento y los bordes

Por favor, consulte:Tutoriales sobre el modelo de cuadro CSS

offsetParent

Todos los elementos de bloque informan el desplazamiento relativo al padre desplazado:

  • offsetTop
  • offsetLeft
  • offsetWidth
  • offsetHeight

El padre desplazado se refiere al antepasado más cercano con una posición no estática.

Si no existe el padre desplazado, el desplazamiento es relativo al texto del documento.

Por favor, consulte:

Atributo offsetLeft

Atributo offsetWidth

Atributo offsetHeight

Atributo offsetParent

Atributo clientTop

Atributo clientLeft

Atributo clientWidth

Atributo clientHeight

Ejemplo

Ejemplo 1

Obtener la ubicación offsetTop de "myDIV":

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

Intente hacerlo usted mismo

Ejemplo 2

Obtener la ubicación de "myDIV":

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

Intente hacerlo usted mismo

Ejemplo 3

Crear navbar pegajoso:

// Obtener el navbar
const navbar = document.getElementById("navbar");
// Obtener la posición de desplazamiento del navbar
const sticky = navbar.offsetTop;
// Al llegar a la posición de desplazamiento, agregar la clase sticky al navbar. Eliminar la clase sticky al salir de la posición de desplazamiento.
function myFunction() {
  if (window.pageYOffset >= sticky) {
    navbar.classList.add("sticky")
  }
    navbar.classList.remove("sticky");
  }
}

Intente hacerlo usted mismo

Sintaxis

Devuelve la ubicación del offset superior:

element.offsetTop

Valor de retorno

Tipo Descripción
Número La posición superior del elemento, en píxeles.

Compatibilidad del navegador

Todos los navegadores lo admiten element.offsetTop:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Soporte Soporte Soporte Soporte Soporte Soporte