Senff - a11n

<h4>Summary</h4>
The Gutenberg Sticky Block can be added to any Post or Page and will be sticky as soon as it hits the top of the page after you scroll down. The Sticky Block can contain any other Blocks (Paragraphs, Images, etc.), and can also be used in other Blocks (e.g. Column or Table).
The main principle is the same as my <a href="https://wordpress.org/support/plugin/sticky-menu-or-anything-on-scroll" rel="ugc">Sticky Menu (Or Anything)</a> plugin, and the basic code of that plugin has been used in this Sticky Block plugin as well. If you want to make anything sticky outside of the content area (e.g navigation menu, widgets), use the Sticky Menu (Or Anything) plugin instead of Sticky Block.
Featured BLOCK OF THE WEEK (Sep 16, 2021).
<h4>Features</h4>
<ul>
<li>Any Block can be added inside the Sticky Block: the Sticky Block works as a “wrapper” or “grouping” block, that can hold every other type of Block.</li>
<li>The Sticky Block can be added inside other Blocks: any block that works as a “wrapper” (such as the Columns Block or the Table Block) can also hold a Sticky Block.</li>
<li>Positioning from top (optional): you can add any amount of space between the Sticky Block and the top of the page, so that the element is not always stuck at the “ceiling” of the page.</li>
<li>Enable for certain screen sizes only (optional): you can set a minimum and/or maximum screen size where the stickiness should work. This can be handy if you have a responsive site and you don’t want your Block to be sticky on smaller screens, for example. </li>
<li>Push-up element (optional): you can pick any other element lower on the page that will push the Sticky Block up again (for example a footer, or even another Sticky Block).</li>
<li>Admin Bar aware: checks if the current user has an Admin Toolbar at the top of the page. If it has, the Sticky Block will not obscure it (or be obscured by it).</li>
<li>Z-index: in case there are other elements on the page that obscure or peek through your Sticky Block, you can add a Z-index easily. This will only be applied once the Block is sticky.</li>
</ul>

Sticky Block for Gutenberg Editor

The Gutenberg Sticky Block will stick at the top of the page once you scroll down.

Tapan Kumer Das

WPWing

Sticky Block for Gutenberg is a container block that sticks to the top or bottom of the page once the visitor scrolls past it. Drop any blocks inside — a navigation menu, a call-to-action, a contact button, a sidebar widget — and they will follow the reader down the page.
Unlike CSS <code>position: sticky</code> (which only works within its parent scroll container), Sticky Block for Gutenberg uses <code>position: fixed</code> with intelligent scroll detection, so it works reliably in any layout.
<h4>Key Features</h4>
<ul>
<li>Multiple sticky blocks per page — place as many sticky blocks as you need, each with its own settings.</li>
<li>Container block — nest any Gutenberg blocks inside: navigation, buttons, headings, images, widgets.</li>
<li>Top or bottom sticky — choose whether the block locks to the top or bottom of the viewport. Cookie bars, chat widgets, and floating CTAs belong at the bottom.</li>
<li>Show only after scrolling — hide the block entirely at page load and reveal it only after the visitor scrolls past the trigger point. Pairs naturally with an entry transition for a smooth appear effect.</li>
<li>Top offset — set how many pixels of space to leave between the sticky block and the top of the viewport.</li>
<li>Admin toolbar aware — automatically shifts down for logged-in users who have the WordPress admin bar visible.</li>
<li>Z-index control — fine-tune stacking order so the sticky block always sits above (or below) other elements.</li>
<li>Scroll direction mode — choose “Always sticky” or “Only while scrolling up” (the pattern used by modern sticky headers that appear on the way back up).</li>
<li>Stop before an element — un-stick the block before it overlaps a footer or another landmark, using a CSS selector (e.g. <code>#footer</code>).</li>
<li>Disable on mobile — turn off sticky behaviour below a configurable viewport breakpoint (default 768 px).</li>
<li>Disable on desktop — turn off sticky behaviour above a configurable viewport breakpoint. Useful for elements that should only float on smaller screens.</li>
<li>Sticky-state background color — set a background color that only appears while the block is stuck, e.g. a solid white behind a transparent nav.</li>
<li>Sticky-state text color — change the text color when sticky, so a transparent header with light text can switch to dark text on a white background.</li>
<li>Sticky-state shadow — add a drop shadow (Small / Medium / Large) that appears only when the block is in sticky position.</li>
<li>Sticky-state padding (all sides) — control top, bottom, left, and right padding independently, applied only while the block is stuck.</li>
<li>Sticky-state border — add a Solid or Dashed border with custom width and color that appears only in the sticky state.</li>
<li>Full width when sticky — instantly expand the block to span the full viewport width the moment it becomes sticky, ideal for navigation bars.</li>
<li>Entry & exit transition — animate the block smoothly in and out of the sticky state with Fade, Slide down, or Fade + Slide, with a configurable duration.</li>
<li>Custom class when sticky — add your own CSS classes to the block when it becomes sticky, for advanced theme integration.</li>
<li>Block transforms — convert any Group block into a Sticky Block (and back) directly in the editor, without rebuilding.</li>
<li>Accessibility — set an <code>aria-label</code> on the sticky wrapper to give screen reader users useful context.</li>
<li>Zero dependencies — no jQuery. The frontend script is plain JavaScript, under 4 KB minified.</li>
</ul>
<h4>How to use</h4>
<ol>
<li>In the block editor, search for Sticky Block and insert it anywhere on your page.</li>
<li>Add blocks inside it — a Navigation block, a Button, a Group, anything you like.</li>
<li>Open the block settings panel on the right and adjust offset, z-index, scroll behaviour, and sticky-state styles.</li>
<li>Preview your page and scroll — the block will stick to the top (or bottom) of the viewport.</li>
</ol>

Sticky Block for Gutenberg

Make any block sticky. A lightweight Gutenberg container block that fixes its content to the top of the viewport as visitors scroll — no coding requir …

Sticky Block for Gutenberg Editor vs Sticky Block for Gutenberg