Some things should not scroll away: a call to action, a price, a set of navigation links. Once they leave the screen they stop working.
A sticky container stays put as the rest of the page moves past it.
Before You Start
- Edition: Pro — sticky containers needs Nexter Blocks Pro.
- Block to enable: Container, switched on under Nexter > Blocks in your WordPress dashboard.
- A Container block holding the content that should stay — see the Container block guide.
Steps
- Select the Container you want to keep on screen.
- Switch sticky on for the devices where it should apply.
- Set the offset — how far from the top it should settle.
- Optionally give the stuck state its own background, padding or shadow so it reads as a bar.
- Publish and scroll the real page.
How It Behaves
Sticky is written onto the container as a class, and the block’s script takes over from there.
- Measured on a published page: with sticky on, the container rendered
tpgb-sticky-enablealongside its normal container classes. - It is per device. The setting is stored per breakpoint, so a sidebar can stick on desktop and scroll normally on a phone — usually what you want, because a phone screen has no room to give away.
- The offset is what keeps it clear of a fixed header. Without one, a sticky section can sit underneath the header.
- The stuck state can look different — its own background and padding are separate settings, which is how a header becomes a compact bar. See the shrinking header guide.
- Measured with Nexter Blocks Pro deactivated: this effect disappears completely and the container renders as a plain section, with nothing on the page to say why.
Limitations
- Pro only — measured with Nexter Blocks Pro deactivated,
tpgb-sticky-enableis absent and the section scrolls away normally. - Sticky costs screen space permanently. On a phone a stuck bar can take a quarter of the window, which is why the per-device setting matters.
- A parent with its own overflow rule can break it. If a sticky container refuses to stick, an ancestor is usually the reason.
- Two sticky sections on one page will overlap unless their offsets are set to account for each other.
- It sticks within its parent. A sticky container stops behaving once its containing section has scrolled past.
Troubleshooting
It does not stick at all
Check Nexter Blocks Pro is active — measured, the sticky class is not rendered without it. Then check sticky is switched on for the device you are testing.
It sticks but hides behind my header
Increase the offset until the section settles below the header.
It works on desktop but not mobile
Sticky is set per breakpoint. Switch it on for the phone breakpoint too, if you really want it there.
It stops sticking part way down the page
It has reached the end of its parent container. Move it up the block tree so its parent spans the part of the page you want it to cover.
Something on the page overlaps it
Raise the container’s z-index in the Advanced tab — see Advanced tab settings.
