Fixed position div behaviour


So I’m trying to create a table of contents that moves along with page scroll by using a fixed position setting. The native webflow breakpoints are messing around with the design though - somewhere between 1360px and the tablet breakpoint, the ToC is interfering with the blog post content.

As can be seen here:

I’ve figured out that I can introduce a larger breakpoint (screens larger that 1440px) and just trigger the position modifier there, but since my table is interactive and shows sub-headings based on scroll progression, this will just make everything clunky.

Ideally, I’d like to create something similar to the content table on ahref’s website (try shrinking your browser window size to see how the ToC changes on the left) :

Wondering how to go about this, perhaps a custom code snippet in the table that will change position based on viewport size?

Here is my site Read-Only: Webflow - kandidatstvai

Bumping this for visibility.