How do you make an inner row sticky while scrolling?
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
-
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 */
}
0 -
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.
0
