Scroll-Triggered Style Changes After Hero Section

What You'll Create

A scroll-detection system that adds a special class to your page once visitors scroll past the first section. This triggers style changes like transforming a transparent header into a solid one, or any other visual modifications you want to apply after the hero.

The Problem It Solves

Squarespace's dynamic header styles don't always behave the way you want—they might change too early or not account for your specific design needs. This technique gives you precise control over when style changes happen by detecting when the second section reaches the top of the viewport.

Perfect For

Dynamic header backgrounds, Transparent-to-solid header transitions, Scroll-based color schemes, Hero section overlays, Landing page effects

What Makes This Different

This technique uses scroll position detection to add a class to the page body at exactly the right moment—when the second section reaches the top of the screen. From there, you can target any element with conditional styles. The most common use case is keeping the header transparent over a hero image, then adding a solid background once visitors scroll into the main content.

Details

• Section Type: Fluid & Classic

• Code Type: CSS + JavaScript

• Prerequisites: Second section with #second anchor ID, script in footer code injection

• Toolkit Title: Change Style of elements after the first section

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