How to Create a Sticky Service Panel That Updates on Scroll in Squarespace
Sponsored by SquareKicker
Want a fixed panel on your Squarespace portfolio that automatically changes as visitors scroll from one project to another?
You can build the effect with SquareKicker Compose without manually writing the JavaScript yourself.
In this example, the panel stays visible while the visitor scrolls through different sections of the page. Each section represents a different project, and the active icons automatically change to reflect the services associated with that project.
What the effect does
The interaction has four basic parts:
A fixed service panel stays visible as the visitor scrolls.
Each portfolio section is associated with a set of services.
The page detects which section is currently being viewed.
The corresponding service icons automatically become active or inactive.
On desktop, the panel can sit along the side of the page. On mobile, it can be repositioned so it doesn't interfere with the content.
The SquareKicker Compose prompt
Open the page you want to add the effect to in Squarespace, launch Compose, and use this prompt:
I'm building a client portfolio page in Squarespace with separate sections for each business where my client has completed installations. Using the existing content and sections on this page, create a sticky service panel that stays visible as visitors scroll through the projects. The panel should show the actual services represented on the page as icons. As visitors scroll from one business to another, the highlighted service icons should automatically update to reflect the services associated with the business currently being viewed. For example, if one business has three services and the next business has four different services, the panel should smoothly change its active/inactive icons as the visitor moves between them. Use the existing businesses and service information on the page. Do not invent or add example services or content. Keep the existing page design and content intact. The new interaction should feel like a natural part of the page. Make the panel sticky on desktop and adapt appropriately for mobile. Use subtle, polished transitions when the active services change.
Why the existing page content matters
One of the useful parts of this approach is that you don't necessarily need to create a separate database of projects and services.
Compose can use the content already on the page.
For example, if one project section contains services such as SEO, migration and strategy, the script can use that information to determine which icons should be active while that section is being viewed.
That means your existing Squarespace sections can become the source of the interaction instead of having to rebuild the page around the effect.
Adjusting the result
Once Compose builds the first version, you can continue prompting it to make smaller changes.
For example:
Move the panel farther from the edge of the screen.
Make the inactive icons more subtle.
Remove the service labels and show icons only.
Change the point at which the next project becomes active.
Hide the panel before the first project and after the final project.
Move the panel to the bottom of the screen on mobile.
Change the animation between active services.
Use different icons for specific services.
I recommend getting the basic interaction working first and then making one adjustment at a time.
The result
The result is a portfolio interaction that would normally require custom JavaScript to track the visitor's scroll position, identify the active project and update the interface accordingly.
With Compose, you can start by describing the experience you want and refine the result directly inside Squarespace.
Try it yourself
You can get 20% off SquareKicker with code OMARI20 through the end of the year.
