How do you make an inner row sticky while scrolling?

Options
kevinbaculi
kevinbaculi Member Posts: 2

See the screenshot below.

I want to make the inner row sticky, maybe 50px from the top while I scroll up and down that row. I want it confined within the column.

I did try to add code into the CSS of the Inner Row:

position:sticky !important;
top:50px !important;

This has not been working, unfortunately.

For some reason, "sticky" does not turn colored when adding it in the CSS editor.

I was also advised to check for any overflow, but not 100% sure where to look.

Any help would be greatly appreciated. Thanks!

Comments

  • Aj_Cre8
    Aj_Cre8 Member Posts: 673 MVP
    Options

    I think you need the webkit reference. May be easier to create a custom class and add that class to the inner column.

    .sticky-column {

    position: -webkit-sticky; /* Safari */

    position: sticky;

    left: 0; /* Adjust this value as needed */

    top: 0; /* Adjust this value to the height of any header, if present */

    z-index: 9; /* Ensure the sticky column is above other elements */

    }

  • kevinbaculi
    kevinbaculi Member Posts: 2
    Options

    Thanks for the answer, @Aj_Cre8 . However, for some reason it didn't work on my end.

    Here's a sample page that I want to work on:

    https://www.cnctddesigns.com/test

    I want the column on the left to stay sticky as I scroll down. I tried adding your code in the inspector but it didn't seem to apply. I also updated the code on the backend CSS but no luck. I am using Firefox to preview the site.