Window pageYOffset

Example 1

Scroll the content by 100 pixels, and alert the pageXOffset and pageYOffset:

window.scrollBy(100, 100);
alert(window.pageXOffset + window.pageYOffset);
Try it Yourself »

More examples below.


Description

The pageYOffset property returns the pixels a document has scrolled from the upper left corner of the window.

The pageYOffset property is equal to the scrollY property.

The pageYOffset property is read-only.


Syntax

window.pageYOffset
or just:
pageYOffset

Return Value

Type Description
A numberThe number of pixels the document has scrolled from the upper left corner of the window.


More Examples

Create a sticky navigation bar:

// Get the navbar
const navbar = document.getElementById("navbar");

// Get the offset position of the navbar
const 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");
  }
}
Try it Yourself »

Browser Support

pageYOffset is supported in all browsers:

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


Copyright 1999-2023 by Refsnes Data. All Rights Reserved.