---
title: "How to Add Sticky Sections in an Image Scroll Sequence?"
url: https://theplusaddons.com/docs/add-sticky-sections-in-image-scroll-sequence/
date: 2023-05-09
modified: 2026-09-19
lang: en
author: "Aditya Sharma"
description: "An image sequence on its own is decoration. What makes it a story is the copy that appears at the right moment — a line of text that holds still..."
image: https://theplusaddons.com/wp-content/uploads/2023/05/How-to-Add-Sticky-Sections-in-an-Image-Scroll-Sequence_-1024x536.jpg
word_count: 810
---

# How to Add Sticky Sections in an Image Scroll Sequence?

## 

- Sticky Sections in the Scroll Sequence widget pins content by CSS ID and frame range, using Start and End frame numbers from 1 to the total image count.
- The Scroll Sequence widget ships only in The Plus Addons for Elementor Pro, and its output disappears if the Pro plugin is switched off.
- The widget uses a numbered image set in JPG, PNG, or WebP, and the post says 30 to 60 frames is a practical range for smoother animation.
- Sticky content stays at the chosen Top (%) position while frames change behind it, then hides outside the range and can overlap with other pinned rows.

An image sequence on its own is decoration. What makes it a story is the copy that appears at the right moment — a line of text that holds still over the frames, then hands over to the next.

**Sticky Sections** in the **Scroll Sequence** widget does that. You give it the CSS ID of a widget and the frame numbers it should be visible between.

*To check the complete feature overview documentation of The Plus Addons for Elementor Scroll Sequence widget, [click here](https://theplusaddons.com/docs/scroll-sequence-elementor-widget-settings-overview/).*

***Requirement - This widget is a part of The Plus Addons for Elementor Pro, make sure it's installed & activated to enjoy all its powers.***

[LIVE WIDGET LINK](https://theplusaddons.com/elementor-widget/image-scroll-sequence/?utm_source=tpae&utm_medium=docs&utm_campaign=text)

## Before You Start

- **Edition:** **Pro** — the **Scroll Sequence** widget ships only in The Plus Addons for Elementor Pro. With the Pro plugin switched off the widget's output disappears from the page entirely.- **Widget to enable:** **Scroll Sequence**, under **The Plus Addons > Widgets**. Search for it and turn the toggle on.- **Prerequisite:** a numbered set of images, one per frame. JPG, PNG and WebP are the formats the widget offers. More frames means a smoother animation and a heavier page — 30 to 60 frames is a practical range.- **Prerequisite:** enough scrolling room. The sequence is driven by the height of the section or container it sits in, so if that area is short, set a **Min Height** on it — otherwise there is nothing to scroll through.

## Give the content widget an ID

- Add the widget you want to pin — a Heading, a Text Editor, anything — into the same section or container as the **Scroll Sequence** widget.- Select it, open the **Advanced** tab and type a name into **CSS ID**. Use letters and digits, no spaces, for example `capA`.- In the same tab, set **Z-Index** higher than the sequence's. The sequence's own **Z-Index**, on its **Style** tab, starts at **0**, so anything from 1 upwards puts your content in front.

## Set up the sticky section

- Select the **Scroll Sequence** widget and open **Extra Option** on the **Content** tab.- Turn **Sticky Sections** on. The toggle reads **Show** when it is on.- Click **ADD ITEM** and fill the row in.

![Extra Option with Sticky Sections switched on and one row open, showing Section ID, Start, End and Top](https://theplusaddons.com/wp-content/uploads/2026/09/scrollsequence-sticky-sections.webp)

| Field | What to put in it |
| ----- | ----------------- |
| **Section ID** | The CSS ID you gave the content widget, without the `#`. |
| **Start** | The frame number the content should appear on. Frame numbers run from 1 to however many images are in your sequence. |
| **End** | The frame number it should disappear on. |
| **Top (%)** | How far down the screen it sits while pinned, as a percentage of the viewport. 10 puts it near the top, 65 about two thirds down. Default 5. |
| **Start Animation** / **End Animation** | An optional entrance and exit effect. Both default to **None**, which makes the content simply appear and disappear. |

Click **ADD ITEM** again for each further piece of content. Every one needs its own CSS ID and its own row.

## How It Behaves

Tested with a 40-frame sequence and two captions — the first set to Start 4, End 14, Top 8%, the second to Start 28, End 38, Top 65%:

![Frame 8 of the sequence with the first caption pinned near the top of the screen](https://theplusaddons.com/wp-content/uploads/2026/09/scrollsequence-result-frame08.webp)

By frame 21 the first caption has gone and no caption is shown:

![Frame 21 of the same sequence with no caption on screen](https://theplusaddons.com/wp-content/uploads/2026/09/scrollsequence-result-frame21.webp)

and the second caption takes over further down, lower on the screen because its Top is 65%:

![Frame 34 of the same sequence with the second caption pinned about two thirds down](https://theplusaddons.com/wp-content/uploads/2026/09/scrollsequence-result-frame34.webp)

- Between **Start** and **End** the content is held at the **Top (%)** position while the frames keep changing behind it.- Outside that range it is hidden, and it is hidden again once the visitor scrolls past the whole sequence.- Scrolling back up brings it back over the same frames.- Ranges can overlap — two rows whose Start/End ranges cross will both be pinned at once, at their own Top positions.

## Limitations

- **Start** and **End** are frame numbers, so they only make sense against your own frame count. Change the number of images and every row needs revisiting.- The field description under **Start** in the editor reads "in viewport or px". That text is wrong — the tooltip on the same field, and the behaviour, are frame numbers.- Sticky Sections only pins content that is inside the same section or container as the widget.- There is no preview of the pinned state in the Elementor editor; check it on the published page.

## Troubleshooting

### The content never appears

Check that **Section ID** matches the widget's **CSS ID** exactly, including capitals, and that you did not include the `#`.

### It appears behind the frames

Raise the content widget's **Z-Index** on its **Advanced** tab. The sequence sits at **Z-Index** 0 by default.

### It flashes past

**Start** and **End** are too close together, or the section is too short. Widen the frame range, or raise the section's minimum height so each frame gets more scrolling.

### Nothing scrolls at all

The section or container needs a **Min Height** tall enough to scroll through.

## Related Docs

- [Scroll Sequence Elementor Widget Settings Overview](https://theplusaddons.com/docs/scroll-sequence-elementor-widget-settings-overview/)- [How to Create Image Scroll Animations like in Apple, Sony in Elementor?](https://theplusaddons.com/docs/create-image-scroll-animations-like-apple-sony-in-elementor/)- [How to Add Image Sequence on the Page Body in Elementor?](https://theplusaddons.com/docs/add-image-sequence-on-page-body-in-elementor/)

## Frequently Asked Questions

**Q: What do I need before adding sticky sections in an image scroll sequence?**
A: The setup depends on the Pro version of The Plus Addons for Elementor, because the Scroll Sequence widget ships only in The Plus Addons for Elementor Pro. You also need a numbered image set, one image per frame, in JPG, PNG, or WebP. The page calls 30 to 60 frames a practical range for smoother motion. If the section is short, give it a Min Height so there is enough scrolling room for the sequence to play.

**Q: How do sticky sections stay aligned with the right part of the image sequence?**
A: Sticky Sections pins a content widget to a specific frame range by using its CSS ID and frame numbers. The content stays at a Top (%) position while the frames keep changing behind it, then disappears outside that range. The Plus Addons for Elementor, The Plus Addons, Plus Addons for Elementor, POSIMYTH uses this to turn a plain image sequence into timed storytelling instead of static decoration.

**Q: Why is my sticky text showing behind the image frames?**
A: That usually means the content widget’s Z-Index is too low. The sequence starts at Z-Index 0 on its Style tab, so any content meant to sit on top needs a higher value on its Advanced tab. A value from 1 upward is enough to bring it in front. This matters because Sticky Sections only works visually if the pinned copy stays above the frames instead of being covered by them.

**Q: What should I do if the sticky content flashes past too quickly?**
A: A flash usually means the Start and End frame numbers are too close together, or the section is too short. Widening the frame range gives the text more time on screen, and increasing the section’s minimum height gives each frame more scroll distance. That combination matters because Sticky Sections is driven by scroll room, not just by the frame count.

**Q: Can sticky sections overlap in an image scroll sequence?**
A: Overlapping ranges are supported. If two rows have Start and End values that cross, both pieces of content stay pinned at once, each at its own Top (%) position. That makes it possible to layer captions or callouts across different parts of the same sequence without replacing one another immediately.

**Q: Why does nothing appear when I set up sticky sections?**
A: The most common cause is a CSS ID mismatch. Section ID has to match the content widget’s CSS ID exactly, including capitals, and it must not include the # symbol. Sticky Sections only pins content inside the same section or container as the Scroll Sequence widget, so placement matters too. If you are comparing behavior with other settings, [Scroll Sequence Elementor Widget Settings Overview](https://theplusaddons.com/docs/scroll-sequence-elementor-widget-settings-overview/) is the related reference for how the widget itself is configured.