Header Scroll Effect on Homepage

What You'll Create

A header that scrolls with your homepage content instead of staying fixed at the top. The header appears after the first section, creating a dramatic reveal effect as visitors scroll down the page.

The Problem It Solves

Squarespace headers are typically fixed or absolutely positioned at the top. When you want the header to appear mid-page or scroll with content on your homepage only, there's no built-in option. This technique repositions the header dynamically using JavaScript.

Perfect For

Creative portfolios, Editorial layouts, Immersive homepages, Landing pages, Storytelling websites

What Makes This Different

This technique moves the header element in the DOM after your first section loads, so it becomes part of the page flow. The header then sticks at the bottom of the viewport as you scroll. Works only on the homepage while keeping standard header behavior on other pages.

Details

• Section Type: Fluid & Classic

• Code Type: CSS + JavaScript

• Prerequisites: Homepage class identifier, First section content

• Toolkit Title: Header Scroll on Homepage

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