Scroll spy

useScrollSpy() — which section is in view, from an IntersectionObserver over ids or a selector.

Basic

• News
• Story
• Cast

News — scroll the page; the nav follows.

Story — scroll the page; the nav follows.

Cast — scroll the page; the nav follows.

<script setup lang="ts">
import { BlessSidebarNav, useScrollSpy } from "blessing-ui";

const sections = [
  { id: "spy-news", label: "News" },
  { id: "spy-story", label: "Story" },
  { id: "spy-cast", label: "Cast" },
];
const { active } = useScrollSpy(
  sections.map((s) => s.id),
  { rootMargin: "-20% 0px -60% 0px" },
);
</script>

<template>
  <div class="row" style="align-items: flex-start">
    <BlessSidebarNav
      :items="sections.map((s) => ({ label: s.label, href: `#${s.id}` }))"
      :active="`#${active}`"
      style="position: sticky; top: 80px; min-width: 120px"
    />
    <div class="col" style="max-width: none">
      <section
        v-for="s in sections"
        :id="s.id"
        :key="s.id"
        style="
          min-height: 260px;
          padding: 12px;
          background: var(--bless-color-surface);
          scroll-margin-top: 80px;
        "
      >
        <b>{{ s.label }}</b> — scroll the page; the nav follows.
      </section>
    </div>
  </div>
</template>

const { active } = useScrollSpy(ids | selector, { rootMargin?, root? });
// ids: string[]           — element ids to observe
// selector: string        — or every element matching it
// rootMargin: string      — default "0px 0px -60% 0px"
// root: Ref<HTMLElement>  — a scroll container instead of the viewport
// active: Ref<string | undefined>

active is the id of the intersecting section whose top edge is nearest the top of the viewport (or of root, when you pass a scroll container) — measured live on every change, so a long section that has just scrolled past doesn't outrank the one arriving. With the default rootMargin only the top 40% of the viewport counts, so a section becomes active as it reaches the upper part of the screen rather than the moment it enters at the bottom. When nothing intersects (above the first section, or in a gap) active keeps its last value; before any scroll it is the first observed id.

Pair it with BlessSidebarNav :active as above, and give sections scroll-margin-top equal to whatever sticks at the top, so a click doesn't land under the bar. The observer is created on mount, so the composable is safe to call in server-rendered components. It observes the targets that exist at that moment: sections rendered later (behind a v-if, loaded after a fetch) are not picked up — put a :key on the component that calls it, tied to the list, so it re-runs when the sections change.