How to create sticky sections on Squarespace
What are sticky sections?
Sticky sections on your website is a tool that can be added to hold a specific position on the screen as the viewer scrolls down the page. Why might you want this? Well, it offers a more dynamic experience for the user. By implementing a small piece of code onto your website, you can guide the user through your site not only in a more aesthetically pleasing and unique way but also offer a more interactive experience, which, in turn, will increase engagement.
How do we add it?
First off, we will need to head into the Website Tools section of our site, and from here we can add our code into the Custom Code section. We are going to start by locating the ID of the sections we want to be sticky, we can do this by using the Squarespace ID Finder on the Chrome extensions panel of your browser. We will then add this to the custom CSS panel.
From here we can then duplicate the process for the next section by adding the section ID again underneath.
And again following the same steps as before which will give us three sections on the website that stick when the user scrolls down the page.
Once we have our section IDs in place we can then add the sticky element of the CSS. We are going to do this by adding the following code.
{
position: sticky !important;
top: 0;
}
The full piece of code will look like the following.
section[data-section-id="658ebefb4180ea099e877658"],
section[data-section-id="65953d6eb3d052036c66937a"],
section[data-section-id="65953d748b263761c0d4aa20"] {
position: sticky !important;
top: 0;
}
Sticky Section Squarespace Website
Disabling sticky sections on mobile
You also have the option to disable the 'Sticky' feature for sections on mobile devices if the content exceeds the screen size. When content wraps on smaller screens and a section is set as sticky, users may face difficulty accessing all the content. In such cases, it might be best to disable the sticky feature. We can do this by adding the followng before our code which will only allow sticky sections above a screen size of 768px.
@media screen and (min-width:768px) {
section[data-section-id="658ebefb4180ea099e877658"],
section[data-section-id="65953d6eb3d052036c66937a"],
section[data-section-id="65953d748b263761c0d4aa20"] {
position: sticky !important;
top: 0;
}
}
We have now learned how to add sticky sections to our website. This feature makes it incredibly simple to create dynamic websites, delivering a professional and seamless user experience. If you have a project in mind you can get in touch by email at hello@jamiestewartdesign.com, Alternativley you can fill out the contact form on my site or call me.
