- This topic has 1 reply, 2 voices, and was last updated 3 months, 2 weeks ago by
.
Hi guys,
this a customisation issue so I know it’s outside of the scope of support but wondered if you had any advice.
I’m looking to make some rows sticky so when the user scrolls and the row reaches the top of the page the row sticks, and then following rows are stacked ontop (like this: https://www.youtube.com/watch?v=CSYCpEqMMFM)
In terms of setup I’m using a vc_section as the container and then .vc_row as the sticky cards.
I’ve spent ages using versions of this code (below) but just can’t get the rows to stick for some reason. Thought I would ask the geniuses at Shufflehound!
Many thanks in advance – Mike
.vc_section.stacking { overflow: visible !important; position: relative; display: block; min-height: 200vh; }
.vc_section.stacking .vc_row {
position: sticky !important;
top: 0;
z-index: 10;
display: flex;
}Hello,
Thank you for reaching out! That sounds like a great customization idea.
If you’d be able to share a link to your website where you’ve implemented this, we’d be happy to take a quick look and see what might be causing the issue with the sticky rows. Sometimes the surrounding elements or CSS rules could interfere with the
position: stickybehavior.Feel free to share the link. 🙂
Best regards,
Shufflehound Team
