Sticky Scrolling Columns for Squarespace 7.0

What You'll Create

A two-column layout where one side stays fixed while the other scrolls. As visitors scroll through the longer content column, the sticky column remains visible and anchored in place.

The Problem It Solves

Squarespace's column layouts scroll together by default. There's no native setting to make one column stick while the other scrolls.

Perfect For

Case study presentations, Before/after comparisons, Product feature highlights, Service explanations, Portfolio project walkthroughs

What Makes This Different

This technique pins one column to the top of the viewport while letting the adjacent column scroll freely. The sticky column stays visible through the entire scroll journey, then releases naturally when you reach the end of the section. You can choose which column stays sticky by targeting the appropriate column in your setup. Works specifically with Squarespace 7.0's classic column structure on desktop screens.

Details

• Section Type: Classic

• Code Type: CSS

• Prerequisites: Index page with multi-column section in Squarespace 7.0

• Toolkit Title: Sticky Columns (7.0)

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