Active Menu on Scroll

What You'll Create

Navigation links that automatically highlight based on which section is currently visible in the viewport. As visitors scroll through the page, the corresponding menu item updates to show their current location.

The Problem It Solves

On long single-page sites with anchor links, visitors lose track of where they are. Active menu highlighting on scroll provides wayfinding - showing which section they're viewing and enabling quick navigation to other sections.

Perfect For

Single-page sites, Landing pages with multiple sections, Portfolio sites, Service overview pages, Any long-scrolling page.

What Makes This Different

JavaScript tracks scroll position and compares it against anchor element positions on the page. When a section enters the viewport, the script adds an 'active' class to the corresponding navigation link. CSS styles the active state differently. Touch events ensure mobile compatibility.

Details

• Section Type: Fluid & Classic

• Code Type: CSS + JavaScript

• Prerequisites: Code blocks with anchor IDs placed in sections, navigation links pointing to anchors

• Toolkit Title: Active Menu on Scroll

Learn This Technique

This is one of 150+ code techniques taught inside Standout Squarespace, where you get:

• The complete, copy-paste code

• Video walkthrough explaining how it works

• The principles behind the technique so you can customize it

• Access to our private community for support