[Resolved] Sticky container inside a grid

[Jean]

I’m trying to create my own table of content and have a gred with 2 column inside both columns i have a container. I assigned one container a CSS class which i named: toc-sticky, thats the container that i would want to have as sticky and then i put below code under the custom css:

.toc-sticky {
position: sticky;
top: 50px;
overflow: scroll;
}

but i can’t get it working, the container doesn’t stick when i scroll.

Another question would be, is it possible to make it this container as sticky on mobile as well? on mobile i would want it showing the expanded table of content but once you scroll it sticks on top of the page with a dropdown showing one heading and next to it a down arrow that indicates that you can expand it to access the other heading in the TOC

[David]

Hi there,

can you share a link to where i can see the problem ToC ?

[Jean]

Hi,
in the bottom of this page: https://bit.ly/38WWNvR
right above the footer

[David]

Position Sticky works by sticking an element to the Top of its parent container. If the element is the same height of that container then you will never see it stick. Instead you target the inside-container like so:

.innehall-navigera > .gb-inside-container {
    position: sticky;
    top: 50px;
    overflow: scroll;
    -webkit-overflow-scrolling: touch;
    transition: top .3s linear;
}

For Mobile position sticky won’t work. It would require a custom javascript solution to make that happen

[Jean]

Great thanks David

[David]

You’re welcome

[Author]

Posts