Window scrollY property

Definition and Usage

scrollY property returns the number of pixels the document has scrolled from the top left corner of the window.

scrollY property is read-only.

Hint

scrollY property is equal to pageYOffset property.

For cross-browser compatibility, please use window.pageYOffset Instead of window.scrollY.

See also:

pageXOffset property

pageYOffset property

Instance

Example 1

Scroll the content by 100 pixels and prompt scrollX and scrollY:

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

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.scrollY >= sticky) {
    navbar.classList.add("sticky")
  }
    navbar.classList.remove("sticky");
  }
}

Try it yourself

Syntax

window.scrollY

Or:

scrollY

Return value

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

Browser support

Alle Browser unterstützen window.scrollY:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Unterstützung 9-11 Unterstützung Unterstützung Unterstützung Unterstützung