JavaScript HTML DOM Window pageXOffset 和 pageYOffset 属性

• 

  Window pageXOffset 和 pageYOffset 属性

  pageXOffset和pageYOffset属性返回当前文档从窗口左上角水平和垂直滚动的像素。pageXOffset和pageYOffset属性等于scrollX和scrollY属性。这些属性是只读的。

  将内容滚动100像素，并提醒pageXOffset和pageYOffset：

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

  尝试一下
• 

  浏览器支持

  项	IE/Edge	Chrome	FireFox	Safari	Opera
  属性
  pageXOffset and pageYOffset	支持	支持	支持	支持	支持

  注意：对于IE8及更早版本，您可以使用“document.documentElement.scrollLeft”和“document.documentElement.scrollTop”（请参阅​​下面的“更多示例”）。
• 

  语法

  返回pageXOffsetand pageYOffset属性：

  window.pageXOffset

  window.pageYOffset
• 

  技术细节

  项目	描述
  返回值：	一个数字，表示文档已从窗口左上角水平和垂直滚动的像素数

• 

  更多例子

  跨浏览器解决方案（使用scrollLeft和scrollTop for IE8及更早版本）：

  window.scrollBy(100, 100);
  
  if (window.pageXOffset !== undefined) { // All browsers, except IE9 and earlier
    alert(window.pageXOffset + window.pageYOffset);
  } else { // IE9 and earlier
    alert(document.documentElement.scrollLeft + document.documentElement.scrollTop);
  }
  

  尝试一下

  创建一个粘性导航栏：

  // Get the navbar
  var navbar = document.getElementById("navbar");
  
  // Get the offset position of the navbar
  var 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");
    }
  }
  

  尝试一下