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.

Prompt

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 Number of pixels scrolling from the top left corner of the window.

Browser support

Semua pelayar mendukung window.scrollY：

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