Skip to content

component

Scrollspy Nav

By vivi park

Details

Summary

Section nav for one-page sites

Description

A section navigation that highlights where you are on the page. This is not a table of contents. It does not read headings out of an article. You name the sections you already have on the canvas, and the matching link lights up as each one reaches the top of the viewport. Setting it up takes a minute. Give each section an ID in Framer's right panel, then list them here as "Label: section-id". Clicking a link scrolls to that section. 13 properties, all on the canvas: Sections · Vertical or horizontal · Marker (line / dot / none) · Smooth scroll · Top offset · Gap · Size · Weight · Tracking · Marker size · Idle · Active · Marker color Top offset accounts for a fixed header, so sections land below it instead of underneath. Built to behave: uses IntersectionObserver, not a scroll listener, so it costs nothing while you scroll. On the canvas the first item shows as active, so the nav never looks broken while you design. Auto width · auto height. Get all four in one place, plus a note when a new one lands: https://bold-wheel-055406.framer.app/pack

Introduction

Section nav for one-page sites

Rank history

Daily rank per list, from the first snapshot — lower is better.

12001400147348/148/228/309/79/15
  • All · #3065