Atributo scrollY de la ventana Window

Definición y uso

scrollY Atributo devuelve los píxeles desplazados desde la esquina superior izquierda de la ventana del documento.

scrollY Es de solo lectura.

Atributo

scrollY Atributo es de solo lectura. Atributo pageYOffset Atributo.

Para la compatibilidad entre navegadores, utilice window.pageYOffset En lugar de window.scrollY.

Vea también:

Atributo pageXOffset

Atributo pageYOffset

Ejemplo

Ejemplo 1

Desplace el contenido 100 píxeles y avise sobre scrollX y scrollY:

window.scrollBy(100, 100);
alert(window.scrollX + window.scrollY);

Pruebe usted mismo

Ejemplo 2

Crear una barra de navegación adhesiva:

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

Pruebe usted mismo

Sintaxis

window.scrollY

O bien:

scrollY

Valor devuelto

Tipo Descripción
Número Número de píxeles desplazados desde la esquina superior izquierda de la ventana del documento.

Soporte del navegador

Todos los navegadores lo admiten window.scrollY:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Soporte 9-11 Soporte Soporte Soporte Soporte