About Scroll Spy Nav
Scroll Tracker is the ultimate solution for long-page navigation in Framer. It allows you to create highly interactive Tables of Contents, Sidebar Menus, or Progress Steps without writing a single line of code.
✨ Key Features
* Auto-Detect Active Section: The component "spies" on the user's scroll position and automatically highlights the current menu item.
* Smart Centering: Unlike standard anchor links that jump to the top, this component smooth-scrolls the target section to the exact center of the viewport.
* Responsive Layouts: Supports both Vertical (Sidebar) and Horizontal (Top bar) layouts with flexible alignment options.
🎨 Fully Customizable
Every aspect of the design is under your control:
* Typography Mastery: Set distinct Font Styles for Normal and Active states. (e.g., switch from Inter Regular to Inter Bold seamlessly).
* Layout & Direction:
* Vertical / Horizontal: Switch instantly between sidebar and top-bar modes.
* Text Position (Standard/Reverse): Easily create Right-side navigation by reversing the text and dot order.
* Alignment: Start, Center, End, or Space Between.
* Visual Styling:
* Colors: Customize Active, Inactive, and Line colors.
* Sizes: Adjust Dot Size, Line Width, and Gaps.
🚀 How to Use
1. Add Scroll Section IDs to the frames you want to link to on your page.
2. Drag this component onto your canvas.
3. In the properties panel, add items and match the Target ID to your section IDs.
4. Set `Position: Sticky` to keep it visible while scrolling.
---
Stop struggling with complex interactions. Upgrade your navigation experience today!