i am trying a sticky card effect within a query loop. for some reason, if within a query, i cannot get cards to become sticky. despite setting container containing query, or even the query template div as relative, the cards will not stick
is that a normal behaviour or am i missing something?
There shouldn’t be an issue doing that.
Did you set the top property, like top: 5rem ?
Also check if there is the overflow property applied to any of the parent elements of your query template block, like the query or section block, etc.
Overflow (hidden, scroll, auto) doesn’t work with position: sticky.
This should resolve your issue.
Thanks @Marius
i have no overflow on any container but this is what the inspector shows
the class of the card is sp-process__card but appears to live in cc-query-item. ive tried position relative on all parent containers
Hi Marius, sent you a pm
Thanks @Spipov!
What you can do is to create a Relative Style to target the query item and set the position from there.
Please let me know if the workaround works out for you.
Thanks @Marius
can i ask you with regards to how you selected cc-query-item
and also how yo uwould set the nth child to add an extra 2rem to each further descendant?
thanks again for trying to help
Can you elaborate? Not sure if I get this correctly.
Can you give me an example? What is the value of the top property for your first item, then 2nd and 3rd? Just to make sure I get your idea.
The smartest thing would probably be a sass loop.
yes say. process-card (1st one) starts at top 4rem
then the next will come up and stop 2rem below (so would be at 6rem)
then 8rem next one. ive implemented this before
Please remember i have absolutely no idea where to insert (im still having issues understanding relative styling) so a screenshot would be most helpful where to put and what to name please?
its my first build . im loving it, and some places im getting stuck as i dont know it well enough
.sp-process__card {
position: sticky;
top: 4rem;
box-shadow: 0 20px 40px 0 var(–o-canvas-300);
}
.sp-process__card:nth-child(1) {
margin-top: 6rem;
}
.sp-process__card:nth-child(2) {
margin-top: 8rem;
top: 6rem; /* height of preceding card’s margin */
}
.sp-process__card:nth-child(3) {
margin-top: 10rem;
top: 8rem; /* height of preceding card’s margin /
}
.sp-process__card:nth-child(4) {
margin-top: 12rem;
top: 10rem; / height of preceding card’s margin /
}
.sp-process__card:nth-child(5) {
margin-top: 14rem;
top: 12rem; / height of preceding card’s margin /
}
.sp-process__card:nth-child(6) {
margin-top: 16rem;
top: 14rem; / height of preceding card’s margin /
}
.sp-process__card:nth-child(7) {
margin-top: 18rem;
top: 16rem; / height of preceding card’s margin /
}
.sp-process__card:nth-child(8) {
margin-top: 20rem;
top: 18rem; / height of preceding card’s margin /
}
.sp-process__card:nth-child(9) {
margin-top: 22rem;
top: 20rem; / height of preceding card’s margin /
}
.sp-process__card:nth-child(10) {
margin-top: 24rem;
top: 22rem; / height of preceding card’s margin */
}
Thanks for the details.
Could you please try this code on your query template block and let me know what’s it doing on your end?
It’s not the most elegant and efficient way to write this, but I tried to make it readable and understandable.
Creating individual Relative Styles for each child wouldn’t make any sense in my opinion, so I chose the custom code route which is easier maintainable.
.blockclass .cc-query-item {
position: sticky;
box-shadow: 0 20px 40px 0 var(–o-canvas-300);
}
@for $i from 1 through 10 {
.blockclass .cc-query-item:nth-child(#{$i}) {
top: ($i + 1) * 2rem;
}
}
@for $i from 2 through 10 {
.blockclass .cc-query-item:nth-child(#{$i}) {
margin-top: ($i + 2) * 2rem;
}
}
The 10 is the amount of your query items. Please set it accurately to make all your items work and also to save unnecessary CSS code.
Thanks for your feedback, we’ll get there 
EXCELLENT
thats working perfect
thanks so much, and i would have had NO idea about this. i really thought simple css would have done , but no idea why it wouldnt stick.
This is workign now
i still dont know why we need to use .cc-query-item and not the targeted sp-process class though. that logic i cant understand
thanks @Marius
You absolutely can do this, however, when inspecting the HTML structure, these styles should live inside the parent container of the children, imo.
Can you confirm that it’s not working when targeting your sp-process class instead?
Thanks for confirming @Spipov.
You can use your custom class by fulfilling these two conditions:
sp-process__grid (or its rules) from your query template block - the flex property interferes with the sticky position.blockclass .cc-query-item {
display:unset;
}
Alternatively, you can create a Relative Style for it:
Please let me know your progress.
Thanks!
