5 Sticky Sections in a Parent Container, Next Sections Overlap or Don’t Scroll Properly [closed]

Question

Closed. This question needs details or clarity. It is not currently accepting answers.

---

Want to improve this question? As written, this question is lacking some of the information it needs to be answered. If the author adds details in comments, consider editing them into the question. Once there's sufficient detail to answer, vote to reopen the question.

Closed 4 days ago.

Improve this question

I’m building a one-page website in WordPress using Elementor, with 5 sticky sections inside a parent container, followed by normal sections. I want:

• The first 5 sections to stick to the top as I scroll.

• Sections after the 5th to flow normally, immediately after the last sticky section.

Current HTML (simplified structure):

<div id="sticky-wrapper">
 <section id="container1">Sticky 1</section>
 <section id="container2">Sticky 2</section>
 <section id="container3">Sticky 3</section>
 <section id="container4">Sticky 4</section>
 <section id="container5">Sticky 5</section>
</div>
<section id="container6">Normal Section 6</section>
<section id="container7">Normal Section 7</section>

Current CSS:

#sticky-wrapper {
 position: relative;
 overflow: visible;
}
#container1, #container2, #container3, #container4, #container5 {
 position: sticky;
 top: 0;
 z-index: 2; /* increment for each section if needed */
}
#container5::after {
 content: "";
 display: block;
 height: 50px; /* attempt to add spacing for next section */
}
#container6, #container7 {
 position: relative;
 padding-top: 5px; /* minimal spacing */
}

Problem:

• The first 5 sticky sections stick correctly, but the 6th section and subsequent sections appear underneath the last sticky section, instead of flowing naturally.

• Each next section has a different height, so I cannot just use fixed spacing.

• Adding padding or ::after on the 5th sticky section partially helps, but it doesn’t fully solve the issue.

What I want:

• Multiple sticky sections inside a parent container working correctly.

• Sections after the last sticky section to scroll normally immediately after sticky release.

Additional Info:

• I’m using Elementor Motion Effects → Sticky → Top: 0 for sticky sections.

• Parent container sticky is disabled.

Question:

How can I make multiple sticky sections inside a parent container release correctly so that next normal sections scroll smoothly, even with variable heights?

• C3roe: From your description, I really can't tell what the issue is supposed to be. Please create a proper minimal reproducible example that illustrates the problem properly.