How to Make Sticky Sections on Squarespace

Sticky Sections is a powerful tool that allows you to hold sections in a specific position on the screen as a user scrolls down the page. In this tutorial, we'll show you how to use Sticky Sections to create eye-catching headers, menus, sidebars, banners, and unique calls-to-actions that stay visible to visitors as they scroll through your page.

Transcript

Sticky Sections is a powerful tool that allows you to hold sections in a specific position on the screen as a user scrolls down the page. In this tutorial, we'll show you how to use Sticky Sections to create eye-catching headers, menus, sidebars, banners, and unique calls-to-actions that stay visible to visitors as they scroll through your page.

Even if you know how to code, sticky is a complex CSS animation to learn and understand. That's why this feature is one of SquareKicker's most popular tools allowing you to be creative without complexity.

In this video, we'll guide you through a variety of ways you can customise your site using Sticky Sections. How to adjust the different behaviours, and layer multiple SquareKicker tools to keep your visitors engaged on your site.

With Sticky Sections, you can create a unique and professional website in minutes, and we're here to help you every step of the way. So, let's get started and see how Sticky Sections can take your Squarespace website to the next level!

Sticky Sections Tools

To enable sticky on a section, head to the Section toolbar in the top right corner of your section and open SquareKicker. Click on the advanced tab and Sticky Section. You can select sticky top or bottom.

Sticky Top

When you select “Top” from the sticky options, your section will immediately become sticky when it reaches the top of the screen. Offset specifies how far from the top your section will become sticky. This is useful if you are layering sticky sections or you have a fixed header and want adjust the section to sit under the header, this is best set with a viewport height or a pixel value. 

Sticky Bottom

Sticky bottom works in the opposite way to sticky top. When Sticky Bottom is applied, the section will stick to the bottom of the screen until you scroll to the original position of the section on the page, and then it will become unstuck. Watch this in reverse as I scroll up the page, see how the section sticks when it reaches the bottom of the page. This can be used to pin sections for only a limited amount of time as you scroll down the screen.

There are multiple ways you can combine Sticky Sections with other SquareKicker features. 

Sticky Banners 

To create a sticky banner that stays on top as you scroll down, first design your section in Squarespace. You may want to toggle “fill screen” off in your Squarespace section setting, this will reduce the section spacing to give more of a banner appearance. Then set the section to Sticky > Top > 0.  

The section sticks to the top of the screen when you scroll down the page, but you will notice the section below scrolls over the top to cover this section and which is not the desired effect for a Sticky banner.

This is because of the section order, by default, all sections have the layer of 0. When sections have the same layer number, they are stacked top to bottom, with top being furthest to the back and the last section in the font.

So to bring this sticky section to the front, we’ll need to give it a layer higher than 0.  

Head into the SquareKicker Section Tools > Layout and increase the Section Layer to 1.  

Now you can see as we scroll down the page, this sticky banner stays on top. Note, that this section will stay sticky, until the last section in the body comes into view and when the footer scrolls up this section will scroll away like normal. You can set this section anywhere on the page and it will stay sticky when it reaches the top of the screen.

Sticky + Sticky Split Animation

One combination is using a sticky section in a group of Sticky Split sections. Sticky Split is premium feature that makes 1 Section Sticky while a group of sections scroll on the second half of the screen. Using Sticky Sections with Sticky Split can create some additional interesting effects. For more information on Sticky Split, watch the Sticky Split tutorial.   

Sticky + Split Screens

You can also use SquareKicker to create Split Screen Sections and have multiple sections across a screen. Try adding sticky to some of these sections to create different visual effects as you move down the screen.   

Sticky + Transparent section backgrounds. 

Another interesting combination is giving the section below a transparent background. Try experimenting with filters or background colours. In this example I have set a split screen to 1/3 in width and placed the sections side by side, removed the background completely and then alternate the visible sections to scroll over each section.

Using Sticky Sections with Squarespace’s Background Image Effects

Finally, try using Squarespace’s background image effects with a Sticky Section. The Background Image Effect is still in motion while the section stays sticky, creating an animation that is playful and engaging. 

Disable Sticky on Mobile Devices

You can also remove Sticky from sections on mobile if the content doesn't fit on the screen. When content wraps on smaller screens and a section is sticky, the user may not be able to access all the content, so in some cases is may be a good idea to disable sticky on smaller devices OR reduce the amount of content on the screen with the block visibility tools for mobile devices.  

Outro

You've now learned how to harness the power of Sticky Sections on your Squarespace website. With this amazing tool, you can create eye-catching designs that allow you to deliver a seamless and professional user experience, without the complexity of coding.

Now you’ve seen various options for using Sticky Sections including multiple combinations of SquareKicker tools, the possibilities are endless! So unleash your creativity, engage your audience and take your Squarespace websites to the next level with Sticky Sections.

Thanks for watching and we look forward to seeing your amazing websites. Don't forget to subscribe to this channel for more Squarespace inspiration.