Can seem to make it stick

How To
1

Can anyone tell me why the sticky is not working on the TOC div on the right?

I’m so confused!

Thanks community

2

See here:
https://elad.medium.com/css-position-sticky-how-it-really-works-54cd01dc2d46

No time to troubleshoot fully… but basically the element is the height of the container (I think a flex stretch property is to blame) - so it can’t stick as it has nowhere to move up/down. Go through your page and make sure the item has a set height.

1 Like
3

Thanks @digismith !

So even before you said that, I dug and dug looking for the stretch property somewhere - but I couldn’t find it anywhere. Is there a default stretch on blocks?

Anyway, with the set height, it works.

What worries me is that I set the height to 60 rem, so what happens when the TOC grows really long and goes beyond 60rem? The bottom would just get cut off I guess?

For now I’m going to settle. It sticks and it works. If I run into an important article where it’s an issue, I guess I’ll work on improving it then.

Thanks again!

4

Changing the height from 60rem to 100% works for me when testing via inspector. Might be a better default to have than 60rem in case it ever gets longer. What I did on a site just to be extra safe, is have 2 sidebars, one of em sticky and the other one non-sticky. Then depending on the amount of articles shown, I show either the sticky or non sticky one. Just gotta figure out around which amount of articles the sidebar would become to tall.

Also you might wanna make it non sticky on mobile :wink:

Screenshot_2023-06-22-09-49-38-34_40deb401b9ffe8e1df2f1cc5ba480b12
Screenshot_2023-06-22-09-49-38-34_40deb401b9ffe8e1df2f1cc5ba480b121080×2400 276 KB

1 Like
5

Thanks @manc !

Indeed, 100% is the way to go. I was using “auto”. Now I know better thanks to you.

I also fixed that before you visited, but it must have been cached. I purged on both LiteSpeed and went to Quic.cloud to purge the CDN too. It’s not sticky on mobile now for me, but I hope it’s the same for everyone else now too!

Thanks again.

6

Hey Steve,

you need one more wrapper div to make it work without setting any specific heights:

  • your flex container (align-items: stretch)
    • your left column (width: 65%)
    • your right column (width: 35%)
      • additional container (position: sticky)
        • your toc
        • your subscribe stuff

Then it should work as expected. This is how it looks after I made those changes using the dev tools:

CleanShot 2023-06-22 at 08.10.01

Hope it helps.

Best,

André