1 звезда на GitHub = 1 новый компонент.

Поставить звезду
Навигация scrollnavigationindicator

Scroll Indicator

Ультратонкая верхняя полоса, показывающая прогресс прокрутки страницы.

Использование

Скопируйте и вставьте этот код на вашу страницу Astro:

astro 
---
import { ScrollIndicator } from 'astro-component-kit';
---

<ScrollProgressTop>Content</ScrollProgressTop>
--- import { ScrollIndicator } from 'astro-component-kit'; --- <ScrollProgressTop>Content</ScrollProgressTop>

Ручная установка

Если вы не используете пакет npm, создайте файл и вставьте следующий код: src/components/lib/ScrollIndicator.astro:

astro 
---
---
<div class="scroll-ind" id="scroll-bar"></div>
<style>
  .scroll-ind { position: fixed; top: 0; left: 0; width: 0%; height: 3px; background: #6366f1; z-index: 1000; box-shadow: 0 0 10px #6366f1; }
</style>
<script>
  window.addEventListener('scroll', () => {
    const bar = document.getElementById('scroll-bar');
    const scroll = document.documentElement.scrollTop;
    const height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
    const scrolled = (scroll / height) * 100;
    if (bar) bar.style.width = scrolled + '%';
  });
</script>
--- --- <div class="scroll-ind" id="scroll-bar"></div> <style> .scroll-ind { position: fixed; top: 0; left: 0; width: 0%; height: 3px; background: #6366f1; z-index: 1000; box-shadow: 0 0 10px #6366f1; } </style> <script> window.addEventListener('scroll', () => { const bar = document.getElementById('scroll-bar'); const scroll = document.documentElement.scrollTop; const height = document.documentElement.scrollHeight - document.documentElement.clientHeight; const scrolled = (scroll / height) * 100; if (bar) bar.style.width = scrolled + '%'; }); </script>

Краткая информация

Категория
Навигация
Имя файла
ScrollIndicator.astro
Зависимости
Нет — чистый Astro + CSS
Теги
scrollnavigationindicator