Sticky position on div is not working as expected

Design help General
1

Hey guys, I am trying to get this table of contents on my page to stick to the top of the page after i scroll past it and then disappear after i scroll past the section.

I know this can be done with sticky position, but something about the structure of my div’s is preventing it from working as expected. I’m pretty new to webflow and wanted to see if anyone had some insight as to why this might be happening and how to get the desired affect.

Here is that page I am working on:
https://preview.webflow.com/preview/mediate-template-615458?utm_medium=preview_link&utm_source=designer&utm_content=mediate-template-615458&preview=95106e488e78f06950f16ed5c109db2f&pageId=66825232d78026a3973b7a1a&itemId=66825232d78026a3973b7acf&locale=en&workflow=preview

Thanks in advance!

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

3

Hi Tyler, it’s nothing to do with Webflow. Sticky position is tricky to work with. Webflow has some docs about it, but in general you’ll want to read up on it and its limitations, and use Chrome DevTools to inspect your page and experiment with your setup.

The most common scenario I see where it seems to “break” is when you are using other ancestor elements which are positioned ( relative, fixed, etc ). This changes the stacking order of elements from the browser’s perspective, and sticky is now sticky in relation to some other element you didn’t intend.

4

Appreciate the quick replay Micheal! Some of the parent elements are indeed set to relative, I’ll look into this and let you know if I still can’t figure it out