Панель прогресса прокрутки — прогресс чтения с одного взгляда

Fastry теперь имеет панель прогресса прокрутки. Это тонкая линия (2px) в верхней или нижней части шапки, которая заполняется слева направо по мере прокрутки страницы.

Где отображается

Панель включена на трёх типах страниц с разной позицией:

Главная страница — панель находится сверху плавающей капсульной шапки Список блога — панель находится снизу шапки Посты блога — так же снизу шапки

Как это работает

Панель — это абсолютно позиционированный <div> внутри элемента <header>. Небольшой скрипт обновляет её width при каждом событии прокрутки:

function update() {
  const scrollTop = window.scrollY;
  const docHeight = document.documentElement.scrollHeight - window.innerHeight;
  const pct = docHeight > 0 ? (scrollTop / docHeight) * 100 : 0;
  bar.style.width = `${pct}%`;
}

Цвет панели — var(--color-brand-500) — он автоматически соответствует вашей активной цветовой теме.

Два пропса

Компонент Header предоставляет два пропса:

Пропс	Тип	По умолчанию	Что делает
showScrollProgress	boolean	false	Отображает панель прогресса
scrollProgressPosition	'top' | 'bottom'	'bottom'	Размещает панель сверху или снизу шапки

Включение на любой странице

<PageLayout title="Ваша страница" showScrollProgress>
  ...
</PageLayout>

Отключение

Каждый макет страницы управляет панелью независимо. Чтобы отключить на конкретной странице, удалите showScrollProgress.