How to create an overlay scroll effect for page sections

This tutorial is specifically for the latest version of Squarespace, known as 7.1, and won't work for older versions of Squarespace. For more information, visit https://insidethesquare.co/themes

In this tutorial, you’ll learn how to create an overlay scroll effect in Squarespace, where a page section will get “stuck” at the top of a browser, and the other content will cover it as you scroll down the page.

Squarespace just released a brand new feature for page sections in version 7.1 called Section Divider.

I recorded a new tutorial, where you'll learn how to access these new design options and what your settings are.

Two lines of code can create this overlay scroll effect in Squarespace, but there are some fun things you can do to create even more depth!

Here are the two codes used in this tutorial; be sure to adjust the values below to make sure it suits the style of your own website.

#page .page-section {
position: sticky!important;
top: 0px!important
}
html {
scroll-behavior: smooth
}

Here is the code from this tutorial with a little bit of a shadow to create even more depth between these pages sections:

#page .page-section {
position: sticky!important;
top: 0px;
box-shadow: 5px 5px 15px rgba(0,0,0,0.8)!important
}
html {
scroll-behavior: smooth
}