Window pageYOffset Property

Definition and Usage

pageYOffset The property returns the number of pixels the document has been scrolled from the top-left corner of the window.

pageYOffset The property is equal to scrollY property.

pageYOffset The property is read-only.

See also:

screenX property

screenY property

Instance

Example 1

Scroll the content by 100 pixels and prompt pageXOffset and pageYOffset:

window.scrollBy(100, 100);
alert(window.pageXOffset + window.pageYOffset);

Try it yourself

Example 2

Create a sticky navigation bar:

// Get the navigation bar
const navbar = document.getElementById("navbar");
// Get the offset position of the navigation bar
const sticky = navbar.offsetTop;
// Add the sticky class to the navigation bar 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

Syntax

window.pageYOffset

Or:

pageYOffset

Return Value

Type Description
Number The number of pixels the document has scrolled from the top left corner of the window.

Browser Support

All Browsers Support pageYOffset:

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