Sticky Block for Gutenberg
Make any block follow your visitors as they scroll — with controls for offset, transitions, sticky-state styles, and more.
Quick Start
You can have a sticky block live on your page in under a minute.
- In the block editor, open the block inserter (+) and search for Sticky Block. Insert it anywhere on the page.
- Click inside the block and add the content you want to keep on screen — a Navigation block, a Button, an Image, or any combination of blocks.
- With the Sticky Block selected, open the Settings sidebar on the right. Adjust offset, z-index, and any sticky-state styles you need.
- Save the page and preview it in a browser. Scroll down — your block will lock to the top of the screen once it reaches that point.
position: fixed with scroll detection, not CSS position: sticky. This means it works correctly in any layout — even inside columns or containers with restricted overflow.
Sticky Options
These core controls live at the top of the block's settings sidebar and are always visible.
| Setting | Default | Description |
|---|---|---|
| Space from top of screen (px) | 0 | How many pixels of gap to leave between the top edge of the viewport and the top of the sticky block. Set this if your site has a fixed theme header so the sticky block doesn't slide underneath it. |
| Account for admin toolbar | On | When enabled, the block automatically shifts down by the height of the WordPress admin bar for logged-in users. Leave this on unless you have a reason to ignore the admin bar. |
| Z-index | 1 | Stack order when the block is in sticky position. Increase this if the sticky block is appearing behind other elements (dropdowns, modals, theme headers). Decrease it if it's covering something it shouldn't. |
Behavior
Control when the block sticks and when it stops.
| Setting | Default | Description |
|---|---|---|
| Stick when | Always |
Always — the block becomes sticky as soon as the visitor scrolls past it and stays sticky until they scroll back up. Only while scrolling up — the block hides when the visitor scrolls down and reappears when they scroll back up. This is the popular pattern used by modern sticky navigation bars that stay out of the way while reading but snap back as soon as you want to navigate. |
| Stop before element (CSS selector) | Empty | Enter a CSS selector (e.g. #footer or .site-footer) and the block will un-stick before its bottom edge reaches that element. Use this to prevent the sticky block from overlapping your footer or a section landmark at the bottom of the page. |
id or distinctive class attribute on the outermost element.
Responsive
Turn off sticky behaviour on smaller screens where fixed-position elements often take up too much space.
| Setting | Default | Description |
|---|---|---|
| Disable sticky on mobile | Off | When turned on, the block behaves like a normal in-flow block on small screens — it will not fix to the top. The block is still displayed; it just doesn't stick. |
| Mobile breakpoint (px) | 768 | Only visible when "Disable sticky on mobile" is on. Sticky behaviour is disabled when the browser viewport is narrower than this value. The default of 768 px covers most phones and small tablets in portrait orientation. |
Colors & Shadow
These styles are applied only while the block is in sticky position. They have no effect on the block's normal in-flow appearance.
| Setting | Default | Description |
|---|---|---|
| Background color when sticky | None | Sets a background color that appears only once the block becomes sticky. The classic use case: a transparent navigation area that fills with a solid white (or any color) the moment it locks to the top of the page. |
| Text color when sticky | None | Changes the text color when sticky. Pair this with a sticky background color — for example, if your normal header has white text on a transparent background, switch to dark text on white once it becomes sticky. |
| Shadow when sticky | None | Adds a drop shadow beneath the block while it is in sticky position. Choose from Small (subtle), Medium, or Large. A light shadow helps the sticky block visually separate from the content scrolling underneath it. |
Padding & Border
Adjust spacing and add a border exclusively in the sticky state — all four sides are independent.
| Setting | Default | Description |
|---|---|---|
| Top padding when sticky (px) | 0 | Extra padding added above the block's content when sticky. Useful for adding breathing room between the top of the viewport and your content once the block locks in place. |
| Bottom padding when sticky (px) | 0 | Extra padding added below the block's content when sticky. |
| Left padding when sticky (px) | 0 | Extra padding on the left side when sticky. |
| Right padding when sticky (px) | 0 | Extra padding on the right side when sticky. |
| Border when sticky | None | Adds a border around the block only in the sticky state. Choose Solid or Dashed. A common use: a thin bottom border that draws a clean visual line between a sticky header and the page content scrolling beneath it. |
| Border width (px) | 1 | Thickness of the border in pixels (1–10). Only visible when Border is set to Solid or Dashed. |
| Border color when sticky | None | Color of the border. Only visible when Border is set to Solid or Dashed. If no color is chosen, the browser's default border color (usually the text color) is used. |
Animation & Full Width
Animate the block smoothly in and out of sticky state, and optionally expand it to span the full screen width.
| Setting | Default | Description |
|---|---|---|
| Entry transition | None |
The animation played when the block enters the sticky state. The same animation is reversed when it exits. None — instant snap (no animation). Fade — the block fades in from transparent to opaque. Slide down — the block slides in from above the viewport. Fade + Slide — both effects combined. |
| Transition duration (ms) | 300 | How long the entry and exit animation takes, in milliseconds. Only visible when a transition other than None is selected. Range: 50–600 ms. 200–350 ms tends to feel natural; below 100 ms is barely perceptible. |
| Full width when sticky | Off | When enabled, the block stretches to span the full viewport width (100vw) the moment it becomes sticky. Ideal for navigation bars that should reach edge to edge once locked at the top, even if the page content is in a narrower container. |
Accessibility
Help screen reader users understand the purpose of your sticky block and give theme developers a reliable CSS hook.
| Setting | Default | Description |
|---|---|---|
| ARIA label | Empty | Adds an aria-label attribute to the sticky wrapper element. Screen readers announce this label when focus moves into the block. For example, if your sticky block contains your site navigation, enter Site navigation. Leave blank to omit the attribute entirely. |
| CSS class when sticky | Empty | One or more extra CSS class names (space-separated) added to the block element when it enters sticky state, and removed when it exits. The built-in is-sticky class is always added automatically — use this field for additional classes you want to target from your theme's stylesheet. Example: header-stuck nav-compact. |
Block Transforms
You can convert an existing Group block into a Sticky Block — and back — without rebuilding from scratch. All the content inside is preserved exactly as it was.
Group → Sticky Block
- Select the Group block you want to make sticky.
- Click the block type icon (the puzzle piece) in the block toolbar at the top of the editor, or right-click the block.
- Choose Transform to → Sticky Block for Gutenberg.
- The Group block is replaced with a Sticky Block containing all the same inner blocks. Open the settings sidebar to configure sticky behaviour.
Sticky Block → Group
- Select the Sticky Block.
- Click the block type icon in the toolbar.
- Choose Transform to → Group.
- The Sticky Block is replaced with a plain Group. All inner blocks are kept. The sticky settings are discarded.
Recipes
Common setups and how to configure them.
Transparent header that turns solid when sticky
The classic modern site header: transparent at the top of the page, fills with a solid background the moment it locks.
- Insert a Sticky Block at the top of your page template. Add your logo and Navigation block inside it.
- In the block's normal styles (not sticky-state), set the background to transparent or leave it unset.
- In the Sticky State Styles panel, set Background color when sticky to white (or your brand color).
- If your normal text is white (to show against a hero image), set Text color when sticky to a dark color so it's readable against the new white background.
- Optionally add a Small shadow to lift the header above the content beneath it.
- For a polished feel, set Entry transition to Fade with a 250 ms duration.
Full-width sticky navigation bar
A sticky nav that stretches edge to edge the moment it locks — regardless of how wide your page container is.
- Insert a Sticky Block and add your Navigation block inside it.
- In Sticky Options, set Space from top to
0. - In Sticky State Styles, enable Full width when sticky.
- Set a Background color when sticky so the bar is visible against the page.
- Add a Bottom border (Solid, 1–2 px) to draw a clean line between the nav and the content below.
- Set Entry transition to Slide down for a crisp reveal.
Sticky CTA that appears only on scroll-up
A call-to-action bar that stays hidden while the visitor reads and reappears the moment they scroll back up — never in the way, always available.
- Insert a Sticky Block lower on the page (below the fold). Add a Button or banner inside it.
- In the Behavior panel, set Stick when to Only while scrolling up.
- Set a contrasting Background color when sticky so the bar stands out.
- Add a Stop before element pointing to your footer (e.g.
#footer) so the CTA doesn't overlap it. - Set Entry transition to Fade + Slide for a smooth appearance.
FAQ
Can I add more than one sticky block on a page?
Yes. You can place as many Sticky Blocks as you need on the same page. Each one has its own independent settings — offset, z-index, scroll direction, sticky-state styles — and they operate entirely independently of each other.
Why doesn't my sticky block work inside a column or group?
If a parent element has overflow: hidden or overflow: clip applied, position: fixed is clipped to that container and the block won't appear correctly when stuck. Remove the overflow restriction on the parent, or move the Sticky Block outside the constrained container. You can inspect the parent in your browser's DevTools to check.
How do I make the block stop before my footer?
Open the Behavior panel and enter a CSS selector in the Stop before element field — for example #footer or .site-footer. The block will un-stick before its bottom edge reaches that element. To find the right selector, right-click your footer in the browser and choose Inspect.
Will it conflict with my theme's sticky header?
It should not conflict, but if both your theme and the plugin apply position: fixed to overlapping elements, use the Z-index setting in the block sidebar to control which element sits on top. Increase the z-index to bring the Sticky Block in front, or decrease it to push it behind the theme header.
Can I disable sticky behaviour on phones?
Yes. Open the Responsive panel, enable Disable sticky on mobile, and optionally adjust the breakpoint (default: 768 px). Below that width the block behaves like a normal in-flow block — it's still visible, just not fixed to the screen.
The block disappears or looks invisible when it becomes sticky — why?
The most common cause is a z-index conflict: something else on the page (a theme header, a modal overlay, a mega menu) is sitting on top of the sticky block. Increase the Z-index in the Sticky Options panel until the block appears above the other element. If the block appears transparent, check whether you need to set a Background color when sticky in the Sticky State Styles panel.
What does "Only while scrolling up" mean exactly?
When this mode is active, the block becomes sticky as usual when the visitor scrolls past it — but it immediately hides when they start scrolling down. It reappears (slides or fades back in) as soon as they start scrolling up. This is the pattern used by most modern sticky navigation bars: it stays out of the way while the visitor is reading, and snaps back as soon as they want to navigate.