Window pageXOffset
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 pageXOffset property returns the pixels a
document has scrolled from the upper left corner of the window.
The pageXOffset property is equal to the scrollX property.
The pageXOffset property is read-only.
Syntax
window.pageXOffset
or just:
pageXOffset
Return Value
| Type | Description |
| A number | The 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
window.pageXOffset is supported in all browsers:
| Chrome | Edge | Firefox | Safari | Opera | IE |
| Yes | Yes | Yes | Yes | Yes | 9-11 |
