Свойство scrollY окна

Определение и использование

scrollY Атрибут возвращает количество пикселей,滚动的文档从窗口左上角。

scrollY Атрибут является только чтением.

подсказка

scrollY Атрибут равен Атрибут pageYOffset атрибут.

Для跨浏览器兼容性，请使用 window.pageYOffset вместо window.scrollY.

См. также:

Атрибут pageXOffset

Атрибут pageYOffset

Пример

Пример 1

Прокрутите содержимое на 100 пикселей и покажите scrollX и scrollY:

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

Попробуйте сами

Пример 2

Создание粘性 навигационной панели:

// Получите навигационную панель
const navbar = document.getElementById("navbar");
// Получите положение навигационной панели
const sticky = navbar.offsetTop;
// Когда вы достигаете его позиции прокрутки, добавьте класс sticky к навигационной панели. Удалите класс sticky, когда вы покидаете позицию прокрутки.
function myFunction() {
  if (window.scrollY >= sticky) {
    navbar.classList.add("sticky")
  }
    navbar.classList.remove("sticky");
  }
}

Попробуйте сами

Синтаксис

window.scrollY

Или:

scrollY

Возвратное значение

Тип Описание
Число Количество пикселей,滚动的文档从窗口左上角。

Поддержка браузера

Все браузеры поддерживают window.scrollY:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Поддержка 9-11 Поддержка Поддержка Поддержка Поддержка