Effects · Gutenberg
Sticky Scroll block for WordPress
Apple-style storytelling layout: one column stays pinned while the opposite column scrolls through feature panels.
Get Blockenberg
Free Gutenberg block in Blockenberg. The inspector controls and front-end behavior on this page come from this block’s source, not a shared stub.
What it actually does
Apple-style storytelling layout: one column stays pinned while the opposite column scrolls through feature panels.
Inspector panels on this block: Layout, Visual, Panels (' + items.length +. Those titles come from index.js, not from a shared template.
Behavior controls: “Pinned side” options: Left (image pinned), Right (image pinned).
Where to find it
Gutenberg inserter → Effects → search “Sticky Scroll” (block name `blockenberg/sticky-scroll` in block.json). Style it in the sidebar after insert.
How to use Sticky Scroll block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Sticky Scroll”, insert it. Category: Effects.
- Configure inspector controls that exist on this block. Open Layout. Set “Pinned side”, “Pinned column width (%)”, “Column gap (px)”, “Panel vertical padding (px)”.
- Check the published page. The view script reads HTML data attributes: data-activate, data-image. The block editor preview may not run the same view script.
Inspector controls from this block’s code
| Control | What the code does |
|---|---|
| Pinned side | Select control; the chosen value is saved on the block. Options: Left (image pinned); Right (image pinned). block.json default: left. Saved as `pinnedSide`. |
| Pinned column width (%) | Numeric range control in the inspector. Range 30–70. block.json default: 50. Saved as `pinnedWidth`. |
| Column gap (px) | Numeric range control in the inspector. Range 16–120. block.json default: 60. Saved as `columnGap`. |
| Panel vertical padding (px) | Numeric range control in the inspector. Range 16–200. block.json default: 80. Saved as `panelPaddingY`. |
| Sticky top offset (px) | Numeric range control in the inspector. Range 0–200. block.json default: 80. Saved as `stickyTop`. |
| Section padding top (px) | Numeric range control in the inspector. Range 0–200. block.json default: 64. Saved as `paddingTop`. |
| Section padding bottom (px) | Numeric range control in the inspector. Range 0–200. block.json default: 64. Saved as `paddingBottom`. |
| Show eyebrow text | On/off toggle in the inspector. On by default. Saved as `showEyebrow`. |
| Show accent dot | On/off toggle in the inspector. On by default. Saved as `showAccentDot`. |
| Image shadow | On/off toggle in the inspector. On by default. Saved as `imageShadow`. |
| Image border radius (px) | Numeric range control in the inspector. Range 0–48. block.json default: 16. Saved as `imageRadius`. |
| Highlight active panel on scroll | On/off toggle in the inspector. On by default. Saved as `activateOnScroll`. |
| Eyebrow / Accent | Color control in the inspector. block.json default: #6c3fb5. Saved as `eyebrowColor`. |
| Colors — Title | Color control in the inspector. block.json default: #111827. Saved as `titleColor`. |
| Description | Color control in the inspector. block.json default: #4b5563. Saved as `descColor`. |
| Dot (inactive) | Color control in the inspector. block.json default: #e5e7eb. Saved as `dotColor`. |
| Dot (active) | Color control in the inspector. block.json default: #6c3fb5. Saved as `dotActiveColor`. |
| Image placeholder | Color control in the inspector. block.json default: #e5e7eb. Saved as `imagePlaceholderColor`. |
| Colors — Background | Color control in the inspector. Saved as `bgColor`. |
| Eyebrow | Text field in the inspector. |
| Panels (' + items.length + — Title | Text field in the inspector. |
| Description | Multiline text field in the inspector. |
What the front-end script actually does
- The view script reads HTML data attributes: data-activate, data-image.
- An IntersectionObserver starts work when the block enters the viewport.
When this is the right block
- Apple-style storytelling layout: one column stays pinned while the opposite column scrolls through feature panels — that is the job of Sticky Scroll, not a generic content block.
- Use it when you need the editor control labeled “Pinned side”, which exists on this block’s inspector.
- It matches pages about sticky, scroll, pinned.
- Inserter grouping: motion, overlays, and visual treatments.
Notes from the implementation
viewScript: this folder’s frontend.js is enqueued on the front end for this block.
FAQ
How do I add the Sticky Scroll block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Sticky Scroll”. It sits under Effects. After insert, open Layout and set “Pinned side”, “Pinned column width (%)”, “Column gap (px)”, “Panel vertical padding (px)”.
What makes Sticky Scroll different from other Blockenberg blocks?
Apple-style storytelling layout: one column stays pinned while the opposite column scrolls through feature panels. Inspector labels on this block include “Pinned side”, “Pinned column width (%)”, “Column gap (px)”, “Panel vertical padding (px)”.
Is the Sticky Scroll Gutenberg block free?
Yes. Sticky Scroll ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Sticky Scroll to match my theme?
Yes. Blockenberg’s shared typography and color panels apply here, plus any block-specific style controls listed on this page (panels: Layout, Visual, Panels (' + items.length +).
Related effects blocks
Marquee Cards
Infinitely scrolling row of rich cards — images, headings, tags, and links. Ideal for features, use-cases, portfolio pieces, or team showcases.
Scrollytelling
Sticky background or image that updates as the user scrolls through text chapters.
Parallax Section
A full-width content section with a background image that scrolls at a different speed for a depth parallax effect.
Image Reveal
Image with a curtain reveal effect triggered on hover or scroll, with overlay label and caption.
Marquee / Announcement Bar
Scrolling announcement bar with pause on hover and accessibility support.
Parallax Depth Cards
Cards with layered 3D depth parallax on mouse move — different elements float at different speeds.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Sticky Scroll from the Gutenberg inserter.