Keywords:

astro
astro-component
scroll
observer
html
viewport
css
toggle
scrolling
position
document
watch
window

Component live demo

Check to keep informations afloat

Scroll viewport!

Current : ℹ️

🚀 Astro — Scroll observer

Viewport scroll position watcher which binds data attributes to body for further CSS usage.
JS scroll event is properly throttled for performance economy.

Three areas are handled : Top, Bottom, and everything in between.
Some margins are applied on these.

Also, viewport scrollbar detection is made available.

📦 Installation

pnpm i @julian_cataldo/astro-scroll-observer

🛠 Usage

---
import ScrollObserver from '@julian_cataldo/astro-scroll-observer/ScrollObserver.astro';
// ...
---

<!-- ... -->
<head>
  <!-- Place component inside HEAD tag -->

  <ScrollObserver />

  <!-- ... -->
</head>
<!-- ... -->

Example usage with SCSS:

nav {
  // ...navbar styles…
  // See live demo for complete example

  opacity: 0;
  transform: translateY(-100%);
  transition: all 1s;

  [data-is-scrolling-up='true'] & {
    opacity: 1;
    transform: translateY(0);
    &::after {
      content: 'Is scrolling up…';
    }
  }
  [data-is-top='true'] & {
    opacity: 1;
    transform: translateY(0);
    &::after {
      content: 'Is top';
    }
  }
  [data-is-bottom='true'] & {
    opacity: 1;
    transform: translateY(0);
    &::after {
      content: 'Is bottom';
    }
  }
}

🎉 Result

<!-- ... -->
<body
  data-is-scrolling-up="true|false"
  data-is-bottom="true|false"
  data-is-top="true|false"
  data-has-scroll="true|false"
>
  <!-- ... -->
</body>
<!-- ... -->

Changelog

Change Log

All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.