[Resolved] Sticky container inside a grid

Home Forums Support [Resolved] Sticky container inside a grid

Home Forums Support Sticky container inside a grid

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1624547
    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

    #1624633
    David
    Staff
    Customer Support

    Hi there,

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

    #1624665
    Jean

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

    #1624735
    David
    Staff
    Customer Support

    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

    #1624855
    Jean

    Great thanks David

    #1625122
    David
    Staff
    Customer Support
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.