How to Make Sticky Sections on Squarespace.

How to Make Sticky Sections using SquareKicker

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.

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 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.

Let's make this

To enable Sticky on a Section

1. Select the Squarespace Section you want to make Sticky.
   
2. Click the SquareKicker icon.
   
3. Open the Advanced tab.
4. Select the Sticky Section menu option.
5. Here you can set the Mode to Sticky Top or Sticky 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.
   • 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
6. Sticky Offset
   
   • 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 to adjust the section to sit under the header, this is best set with a viewport height or a pixel value. You can adjust the exact point the Block becomes Sticky with the Sticky Offset slider. The way Sticky Offset works is when the Section becomes sticky to the top or bottom, it asks, how far from the top or bottom do you want the block to stay sticky? If it is set to zero, it will stay sticky to the top or bottom of the screen.
   • There are four ways you can adjust the Sticky Offset.
     • • VH - % of viewport height (display height).
       • PX - Pixels.
       • VMAX - 1% of the viewport's larger dimension (landscape or portrait).
       • VMIN - 1% of the viewport's smaller dimension (landscape or portrait).
7. Click Apply to save your design changes.

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

Sticky Banners

To create a Sticky banner that stays on top as you scroll down,

• Design your Section in Squarespace (You may want to toggle “fill screen” in your Squarespace section setting, this will reduce the section spacing to give more of a banner appearance).
• Set the Section to Sticky > Top > 0.  
• Head into the SquareKicker Section Tools > Layout and increase the Section Layer up to 1.  

As you scroll down the page, the banner will stick to the top until the last section of 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 a Premium Feature that makes one Section Sticky while a group of sections scroll past 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 the width of the screen. You can then add 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.

Sticky Sections + Squarespace Background Image Effects

You can use Squarespace’s background image effects with a Sticky Section. The Background Image Effect remains in motion while the Section stays Sticky, creating a playful and engaging animation.

• Select Section in Squarespace.
• Click Squarespace Edit Section Icon (pencil).
• In the Background Tab add an image.
• In the Background Tab click Image Effect.
• Select the desired Image Effect and adjust the settings as required.

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 it 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.