Home Forums Community Forum Sticky Column – is this possible?

Only users with a registered purchase of Avada can post to the community forum. Please register your purchase here.
Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • media_streamlinepub
    Participant
    Post count: 1

    Hi there –

    Is it possible to create a ‘sticky’ column in Avada?

    I have a page split 1/4 and 3/4 and would like the 1/4 (left) column to scroll with the user as they make their way down the page.

    Is this possible with Avada out of the box?

    Thx

    Soulkite
    Participant
    Post count: 1

    I’m looking the same information, but nobody answer in this forum.

    marklchaves
    Participant
    Post count: 662

    Hi Everyone,

    I haven’t seen this out of the box in Avada. But, it’s pretty straight forward to do with custom CSS.

    https://imgur.com/3nIikTy

    monkkeys
    Participant
    Post count: 2

    Any chance you could share an example of the coding you used to achieve this?

    marklchaves
    Participant
    Post count: 662

    Hi @monkkeys,

    Thanks for asking. I put what little code there is and some instructions on GitHub.

    Comments/improvements are welcomed.

    monkkeys
    Participant
    Post count: 2

    Thanks for the code. I found this article (https://alligator.io/css/position-sticky/) which also describes the process. I would just suggest that you add -webkit-sticky vendor prefix for it to work in Safari.

    /** Add this to your page's CSS */
    .floating-toc {
      -webkit-sticky
      position: sticky;
      top: 171px; /* Offset for the header. Adjust as needed. */
    }

    Also, if for some reason (like formatting background color) you need to have the Container settings “Set Columns to Equal Height” to yes, and then you can add this CSS class to one element in a column, but not the column itself. If you need to add more elements, I got around this by creating a global library element with a global shortcode or a widget and using the Widget Area element. I think nested columns might work as well to hide elements inside of a single element.

    marklchaves
    Participant
    Post count: 662

    Hi @monkkeys,

    Great feedback. Agreed. The webkit prefix is still needed if people are on Safari 12 or older from my understanding.

    It sounds like you’ve got a cool implementation.

    Thanks for the aligator.io reference. I tried to access it a couple of times. But, it’s hanging for me. I’ll try again later.

    Cheers!

Viewing 7 posts - 1 through 7 (of 7 total)
Only users with a registered purchase of Avada can post to the community forum. Please register your purchase here.