Effects · Gutenberg
Scroll Sticky Content block for WordPress
Stripe/Linear-style two-column layout with a sticky heading panel on one side and scrollable feature cards on the other. Active item highlights as it enters the viewport.
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
Stripe/Linear-style two-column layout with a sticky heading panel on one side and scrollable feature cards on the other. Active item highlights as it enters the viewport.
Inspector panels on this block: Item, Panel Content, Layout & Scroll, Spacing & Sizes, Features. Those titles come from index.js, not from a shared template.
Behavior controls: “Sticky Panel Position” options: Sticky panel — Left, Sticky panel — Right.
Where to find it
Gutenberg inserter → Effects → search “Scroll Sticky Content” (block name `blockenberg/scroll-sticky-content` in block.json). Style it in the sidebar after insert.
How to use Scroll Sticky Content block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Scroll Sticky Content”, insert it. Category: Effects.
- Configure inspector controls that exist on this block. Open Item. Set “Item — Title”, “Description”, “Heading”, “Subtext”.
- Check the published page. The view script reads HTML data attributes: data-opts. The block editor preview may not run the same view script.
Inspector controls from this block’s code
| Control | What the code does |
|---|---|
| Item — Title | Text field in the inspector. |
| Description | Multiline text field in the inspector. |
| Heading | Text field in the inspector. block.json default: Why Choose Us. Saved as `sectionTitle`. |
| Subtext | Multiline text field in the inspector. block.json default: Scroll through our core advantages and see why teams choose our platform.. Saved as `sectionSubtitle`. |
| Show CTA Button | On/off toggle in the inspector. On by default. Saved as `showCta`. |
| CTA Label | Text field in the inspector. block.json default: Get Started Free. Saved as `ctaLabel`. |
| CTA URL | Text field in the inspector. block.json default: #. Saved as `ctaUrl`. |
| Sticky Panel Position | Select control; the chosen value is saved on the block. Options: Sticky panel — Left; Sticky panel — Right. block.json default: left-sticky. Saved as `layout`. |
| Sticky Top Offset (px) | Numeric range control in the inspector. Range 0–200. block.json default: 80. Saved as `stickyOffset`. |
| Line Connector | On/off toggle in the inspector. On by default. Saved as `lineConnector`. |
| Animate Cards on Scroll | On/off toggle in the inspector. On by default. Saved as `animateCards`. |
| Intersection Threshold | Numeric range control in the inspector. Range 0.1–0.9. block.json default: 0.45. Saved as `threshold`. |
| Padding Top (px) | Numeric range control in the inspector. Range 0–200. block.json default: 80. Saved as `paddingTop`. |
| Padding Bottom (px) | Numeric range control in the inspector. Range 0–200. block.json default: 80. Saved as `paddingBottom`. |
| Card Icon Size (px) | Numeric range control in the inspector. Range 16–80. block.json default: 36. Saved as `cardIconSize`. |
| Section Background | Color control in the inspector. block.json default: #0a0a0f. Saved as `sectionBg`. |
| Heading | Color control in the inspector. block.json default: #ffffff. Saved as `headingColor`. |
| Body Text | Color control in the inspector. block.json default: #e2e8f0. Saved as `textColor`. |
| Accent | Color control in the inspector. block.json default: #7c3aed. Saved as `accentColor`. |
| Card Background | Color control in the inspector. block.json default: #111827. Saved as `cardBg`. |
| Active Card Bg | Color control in the inspector. block.json default: #1e1b4b. Saved as `activeCardBg`. |
| Card Border | Color control in the inspector. block.json default: #1f2937. Saved as `cardBorder`. |
| CTA Background | Color control in the inspector. block.json default: #7c3aed. Saved as `ctaBg`. |
| CTA Text | Color control in the inspector. block.json default: #ffffff. Saved as `ctaColor`. |
What the front-end script actually does
- The view script reads HTML data attributes: data-opts.
- An IntersectionObserver starts work when the block enters the viewport.
When this is the right block
- Stripe/Linear-style two-column layout with a sticky heading panel on one side and scrollable feature cards on the other. Active item highlights as it enters the viewport — that is the job of Scroll Sticky Content, not a generic content block.
- Use it when you need the editor control labeled “Item — Title”, which exists on this block’s inspector.
- 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 Scroll Sticky Content block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Scroll Sticky Content”. It sits under Effects. After insert, open Item and set “Item — Title”, “Description”, “Heading”, “Subtext”.
What makes Scroll Sticky Content different from other Blockenberg blocks?
Stripe/Linear-style two-column layout with a sticky heading panel on one side and scrollable feature cards on the other. Active item highlights as it enters the viewport. Inspector labels on this block include “Item — Title”, “Description”, “Heading”, “Subtext”.
Is the Scroll Sticky Content Gutenberg block free?
Yes. Scroll Sticky Content ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Scroll Sticky Content 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: Item, Panel Content, Layout & Scroll, Spacing & Sizes).
Related effects blocks
3D Text
Eye-catching 3D extruded text using CSS text-shadow layers and perspective transforms. Supports rotate-on-hover, float animation, and customizable depth, colors and typography.
Animated Text
Heading with animated cycling words — typewriter, fade, slide, or flip effects. Perfect for hero sections.
Card Carousel
Horizontal drag-to-scroll card carousel with rich cards, autoplay, arrows, dots, and responsive column settings.
Card Deck Slider
A 3D card deck slider where cards arc/fan out behind the front card and animate through the sequence.
Card Stack
A fanned or stacked pile of cards with hover-spread interaction. Perfect for testimonials, case studies, or feature highlights.
Confetti Button
A call-to-action button that triggers a burst of canvas confetti particles on click. Supports multiple confetti styles, custom colors, particle physics and link/action settings.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Scroll Sticky Content from the Gutenberg inserter.