"How To" handle sidebar stickyness not on the top element but second

Design help Layout & Design
1

Hello Everyone,

Hope you doing fine.

I have a blog with a sidebar. This sidebar is made of :
Level 0: One div
Level -1: A wrapper
Level -2.1: A div to book a coaching session
Level -2.2: A div with the article table of contents (TOC)
Level -2.3: A div to subscribe to the newsletters

I would like the div with the TOC to be sticky on scroll down and the one with the newsletters to stay below the div with the TOC.

I’m struggling to do that. So far, I managed to make either the entire sidebar sticky (but the first div to book a coaching session stays on top and prevents to see the entire TOC), or the TOC div remains sticky but the newsletter div disappears below it.

Here is my read-only link

Thank you!

2

Hi there,

To create a sticky sidebar with your Table of Contents (TOC), you’ll need to implement the “position: sticky” CSS property. This will keep your TOC visible while users scroll through your content.

  1. Select your TOC div in the canvas
  2. Go to Style panel > Position
  3. Choose Sticky from the dropdown
  4. Add a top value (e.g., 0px or 30px) to specify where it should stick

The sticky element will remain within its parent container (the wrapper), so make sure the newsletter div is placed after the TOC div in the structure. When you scroll, the TOC will stick to the page while staying within its container, and the newsletter div will maintain its position below.

Hopefully this helps! If you still need assistance, please reply here so somebody from the community can help.

3

Hi AI Moderator,

Unfortunately, the newsletter div slides through the TOC that remains sticky when I try this. This is my issue :D

4

Solution found thanks to someone else on the French nocode community slack. Just had to set up my nesting differently.