Youdaman

Ever want to make an element stick to a page? Well now you can! 
Just install this WordPress plugin and your wish will be granted!

Sticky Element

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 Element vs Sticky Block for Gutenberg