Do you want to create a sticky container in WordPress? A sticky container keeps the section in a fixed position on the page as the user scrolls, this feature can be particularly useful for displaying important information, such as contact details or a call-to-action, throughout the visitor’s browsing experience.
With the Container block from the Nexter Blocks, you can easily make the section sticky in WordPress.
To check the complete feature overview documentation of the Nexter Blocks Container block, click here.
Requirement – This block is a part of the Nexter Blocks, make sure it’s installed & activated to enjoy all its powers.
What It Does
The Sticky toggle in the Container block’s Extra Options tab keeps a section fixed in the visitor’s viewport as the page scrolls, instead of letting it scroll away with the rest of the content.
Why It Matters
A visitor who scrolls three screens down a page has already lost the header, the contact button, or the offer banner unless that section is pinned in place. Making a container sticky keeps a call-to-action, phone number, or navigation bar in front of the visitor for the entire visit, without needing a separate sticky-header plugin.
What You Get
Two sticky behaviors (Normal + Sticky and Only Sticky), a show/hide-on-scroll-direction option, a per-device Top Offset, a configurable transition duration, and a toggle to keep the sticky element confined to its parent container — all set from the block’s Extra Options tab, no custom CSS or JavaScript required.
Benefits
- Works on any Container you have already built — turning a section sticky is a single toggle, not a rebuild.
- Decouples important content (a CTA, contact bar, or header) from page length, so long pages do not bury it.
- Ships with a mouse-scroll-direction mode (show only when scrolling up) so the sticky element does not compete for attention while a visitor is reading down the page.
Capabilities
- Normal + Sticky – the container is visible initially, sticks once it reaches the top, and scrolls back up out of view when the visitor scrolls up.
- Only Sticky – a reverse mode: the container stays hidden until it reaches the top of the viewport, then sticks; scrolling up hides it again.
- Animation – choose the entrance effect used when the sticky container appears.
- On Mouse Scroll Up Sticky – show the sticky container only while the visitor scrolls up; it will not stick while scrolling down. Enabling this hides the Top Offset field.
- Top Offset – set a per-device distance from the top of the viewport before the container sticks.
- Transition Duration(s) – control how fast the sticky container animates into place.
- Stay In Container – keep the sticky element confined to the boundaries of its parent container instead of the full viewport.
How It Works
Enabling Sticky switches the container’s CSS positioning so it locks to the top of the viewport once its natural scroll position reaches the offset you set. The Header Type option decides whether it is visible from the start (Normal + Sticky) or only appears once it reaches the top (Only Sticky), and Stay In Container constrains that fixed positioning to the parent element rather than the whole page.
How to Use It
Add the Container block with the appropriate layout to the page and follow the steps:
1. Go to the Extra Options tab, and enable the Sticky toggle.
2. From the Header Type section, select Normal + Sticky or Only Sticky depending on how you want the container to behave (see Capabilities above).
3. From the Animation section, choose the animation effect for how the sticky container will show.
4. Enable On Mouse Scroll Up Sticky if you only want the container to stick while the visitor scrolls up.
Note: When On Mouse Scroll Up Sticky is enabled you won’t see the Top Offset field.
5. Set a Top Offset per device, and a Transition Duration(s) for how fast the sticky container animates into place.
6. Enable Stay In Container if you want the sticky element to remain within its parent container instead of the full viewport.
You should now see a working sticky container, which can also be used to build a sticky header.
Use Cases
- Building a sticky header out of a Container instead of the dedicated header builder, for a fully custom layout.
- Pinning a contact bar or phone number so it stays visible on long service or landing pages.
- Keeping a call-to-action button in view on a sales page while the visitor reads through the content.
Limitations
- Only one axis of stickiness is supported (sticks to the top of the viewport) — there is no bottom-of-viewport sticky option.
- When On Mouse Scroll Up Sticky is enabled, the Top Offset field is unavailable, so the two options cannot be combined.
- A container nested inside another element with hidden overflow (for example a scrollable inner wrapper) may not stick, because CSS sticky positioning is constrained by its scrolling ancestor — this is standard browser behavior, not specific to the Container block.
Troubleshooting
- A popup or dropdown inside the sticky container closes immediately after opening: this can happen when an animation/motion effect is applied to the sticky container itself, since the position change can re-trigger the widget’s own outside-click handler. Disable the container’s motion/animation effect (keep the Sticky Animation setting above instead) and re-test. Reported in a related sticky-container-plus-popup case (ticket #7868).
- The container does not stick at all: confirm it is not nested inside a parent with hidden or scrolling overflow, and confirm the Sticky toggle is enabled on the Container itself and not a child block.
- The sticky container jumps or flashes on load: check that the Top Offset value is set correctly per device (Desktop, Tablet, Mobile) — a mismatched offset on one breakpoint is the most common cause.
