How do I make my module sticky?
A sticky module pins itself to the top of the visitor's browser window as they scroll. Instead of scrolling out of view like the rest of your page content, the module stays fixed in place while the visitor continues scrolling further down the page. All POWER modules can be set to be a sticky module through a simple checkbox.
What is a sticky section?
When a module is set to "sticky," it pins itself to the top of the visitor's viewport once the visitor scrolls past it. Rather than disappearing off the top of the screen along with the rest of the page, the module stays fixed and visible as the visitor continues scrolling further down.
This behaviour is controlled entirely through a module setting — no custom code or CSS is required.
How sticky sections interact with a sticky header
If your theme already has a sticky header enabled, sticky modules are aware of it. Rather than pinning directly to the very top of the browser window (which would place it underneath or overlapping your header), the sticky module will pin itself just below your sticky header, preserving the header's visibility and avoiding any overlap.
Step-by-step setup instructions
Follow these steps to enable a sticky section on any module.
- Open your module's options within the HubSpot CMS and navigate to the "Layout" tab.
- Locate the "Sticky section?" checkbox within the Layout tab.
- Check the box to enable the sticky behaviour for that module.
- Save your changes. Once enabled, the module will automatically pin itself to the top of the viewport (or just below your sticky header, if one is enabled) once a visitor scrolls to that point on the page.
No further configuration is required — the sticky behaviour is applied automatically based on the module's position on the page.
If a page contains more than one sticky section, only one can occupy the pinned position at the top of the viewport at any given time. In this case, the most recently scrolled-past sticky section is the one that remains visible — meaning as a visitor scrolls further down the page and passes a second sticky module, that second module takes over the pinned position from the first.
This allows you to layer multiple sticky elements down a long page (for example, different sticky CTAs for different sections) while ensuring only the most contextually relevant one is shown at any given scroll position.
Frequently asked questions
What does enabling "sticky section" do to a module? It causes the module to pin itself to the top of the visitor's browser window once they scroll past it, keeping it visible as they continue scrolling down the rest of the page.
Where do I enable the sticky setting? In the module's options, under the "Layout" tab, there is a "Sticky section?" checkbox.
Does a sticky module cover my sticky header? No. If your theme has a sticky header enabled, sticky modules automatically pin themselves just below the header rather than overlapping it.
What happens if I have more than one sticky module on the same page? Only the most recently scrolled-past sticky section stays visible. As a visitor scrolls further and passes another sticky module, that module takes over the pinned position.
Does making a module sticky require custom code? No. Sticky behaviour is enabled entirely through the "Sticky section?" checkbox in the module's Layout tab — no custom CSS or code is required.