Introduction
The Sticky Content Sections element gives you a way to choreograph how content unfolds while the user scrolls. Depending on the selected layout type, sections can pin, stack, slide horizontally, reveal layered cards, or display synchronized sticky media, all managed through individual section blocks.
This element is ideal for:
- Hero sections
- Experimental landing pages
- Creative portfolios
- Editorial or storytelling layouts
- Micro-interactions that reinforce branding
Note
This element is a parent container and accepts both
Sticky Content Section and Row elements as child items.
While inner rows are available for special use cases—such as fixed overlays, decorative elements, or absolute positioning—they do not scroll, pin, or animate like sections and should not be used for the main content structure. You should primarily use the Sticky Content Section element for each section in the animation.
1. Basic Usage
- In the Salient WPBakery page builder, add the Sticky Content Sections element.
- Inside it, add one or more Sticky Content Section (child) elements.
- For each child section, set the media and content you want displayed.
- In the parent element, choose a Type (scroll behavior) and configure the options
available for that type.
Global Setting: Type
The Type controls the main scroll behavior and determines which option groups appear.
| Label | Description |
|---|---|
| Sticky Media, Scrolling Content | Classic layout: sticky media on one side, content sections scroll beside it. |
| Sticky Scroll Pinned Sections | Each section pins/sticks as you scroll, stacking vertically with optional animation effects. |
| Horizontal Scrolling | Sections scroll horizontally while the viewport remains fixed vertically. |
| Layered Card Reveal | Cards reveal in a layered stack as you scroll, ideal for testimonials or milestones. |
2. Sticky Media, Scrolling Content
Creates a layout where a media area (image or video) stays sticky while the content for each section scrolls alongside it. Each child section can swap the media as the user scrolls.
2.1 Layout Options
Content Position
- Right – Media on the left, content on the right.
- Left – Media on the right, content on the left.
Content Spacing
Controls the vertical spacing between stacked content sections (in viewport height).
- 20% – 55% (
20vh–55vh)
2.2 Media Size & Ratio
Media Width
Controls how wide the sticky media area is relative to the full section width.
- 40% – 75%
Media Height
Controls the vertical height of the sticky media area.
- 50vh – 100vh
Mobile Media Aspect Ratio
Defines how the media is cropped on mobile devices.
- 16:9 (
16-9) - 1:1 (
1-1) - 3:2 (
3-2) - 4:3 (
4-3) - 4:5 (
4-5)
3. Sticky Scroll Pinned Sections type
Sections pin to the viewport as you scroll, stacking vertically with optional overlap and animation effects. Ideal for storytelling or milestone timelines where each section remains in view while the next one animates in.
3.1 Section Effects
Effect
Controls the animation applied as sections stack or transition.
- None – no extra animation.
- Overlapping – sections overlap as they stack.
- Scale – scale transform as sections move in/out.
- Blurred Scale – combines scaling with blur.
- Fade Scale – sections fade and scale against a color.
Overlap Amount
Only when Effect is set to Overlapping. Controls how much each section overlaps the previous one (per device). Higher values create a more pronounced stack.
Fade Color
Only when Effect is set to Fade Scale. Color picker for the background color used in the fade/scale transition.
3.2 Section Size & Layout
Section Height
Visible height of each pinned section in viewport height.
- 50vh – 100vh (in 5% increments)
Max Height per Device
Optional maximum height (in px, rem, or vh) for pinned sections. Useful when you want to restrict extremely tall content on specific devices.
Subtract Navigation Height
When enabled, subtracts the navigation bar height from the section height so pinned sections fit exactly beneath a sticky header.
Content Alignment
Vertical alignment of content within each pinned section.
- Middle
- Stretch
- Top
- Bottom
3.3 Visual Stack & Navigation
Stacked Appearance
Keeps the top edges of all sections slightly visible, creating a visual stack as you scroll through them.
Section Navigation
Adds in-view navigation controls to jump between sections.
Navigation Color
Color picker for the section navigation UI. Only visible when Section Navigation is enabled.
4. Type: Horizontal Scrolling type
Transforms stacked sections into a horizontal-scrolling track on desktop while maintaining vertical scroll behavior for the page. Ideal for portfolios, feature overviews, or timelines that slide sideways.
This variant will only use the scrolling effect in the desktop viewport (> 1000px). On smaller viewports, it will stack the sections normally.
4.1 Horizontal Effect
Effect
Additional visual behavior for the horizontal scroll.
- None – standard horizontal scroll.
- Stacking – sections visually stack as they progress.
4.2 Section Dimensions
Section Width
Controls how wide each horizontal section is as a percentage of the viewport width.
- Min: 25%
- Max: 100%
- Step: 1%
Only applies on desktop where horizontal scrolling is active.
Section Height
Vertical height (viewport-based) of the horizontal-scrolling area.
- 50vh – 100vh
Section Gap
Controls the horizontal gap between sections (e.g. 10px).
4.3 Alignment & Viewport
Content Alignment
Vertical alignment of content inside each horizontal section.
- Middle
- Stretch
- Top
- Bottom
Subtract Navigation Height
Deducts the navigation bar height from the section height to ensure the horizontal-scrolling region fits neatly beneath a sticky header on desktop.
5. Layered Card Reveal
Displays content as a stack of cards that are revealed progressively while scrolling. Great for testimonials, quotes, or milestone cards with a strong visual hierarchy.
5.1 Card Size & Layout
Card Width (Per Device)
Numerical width values for the card container on each device breakpoint (e.g. 480px,
70%). These fields are grouped in the UI under a “Card Width” device group.
Card Aspect Ratio
Controls the height of the card relative to its width.
- 1:1 (
1-1) - 4:3 (
4-3) - 3:2 (
3-2) - 16:9 (
16-9) - 2:1 (
2-1) - 4:5 (
4-5)
5.2 Alignment & Viewport
Content Alignment
Vertical alignment of the stacked cards relative to the viewport.
- Middle
- Stretch
- Top
- Bottom
Subtract Navigation Height
When enabled, the effective section height is reduced by the nav height so that the card stack
aligns nicely beneath a sticky site header.