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;
// When you reach the scroll position, add the sticky class to the navigation bar. Remove the sticky class when leaving 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 document scroll from the top left corner of the window in pixels.

browser support

Dukkan browsersu suka tukuri window.scrollY：

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