Make row or element sticky within section

[jlukes42]

Hi, I’m curious if you can make a row sticky within a section, or an element sticky within a column. Take a look at http://hollywoodherstory.com/oscars-by-category/. I’m trying to make each section header (Best Actress, Best Supporting Actress, etc.) sticky underneath the category navigation until the next section comes up and repeat for each section. It would also be useful to make an image sticky within its parent section.

I’ve been trying to use CSS position: sticky; but I’ve had no luck. Any help would be appreciated. Thanks!

[friech]

Hey Jeffrey,

Thank you for writing in, but there’s no option in the content builder for that. You can use a third party plugin like Sticky Anything on Scroll. Here’s a demo setup by an X user https://youtu.be/sRNFHtr_k8c. Just note that we do not have support for third party plugins. For usage questions, please contact the plugin author.

Hope that helps,
Cheers!

[jlukes42]

Thank. Unfortunately, that plugin only supports stickiness for one element id or class and one element to push it off screen.

I’m looking for something that will allow a row to be sticky within its parent for multiple items on the page. It’s usually pretty simple with CSS properties, but I can’t get it to work with X-Pro’s more convoluted output.

[christian]

Hey Jeffrey,

position: sticky won’t work if a containing parent’s overflow property is set to hidden and that is the case in our themes to support features of our builders and more.

Your claim that it’s simple with CSS properties is only true for basic HTML structures and if you’re following simple tutorials. CSS development is actually complex if you take into account a lot of things that’s why not everything can be achieved easily. Please understand that our theme and builders are only structurally complex because we support a lot of features.

Please watch the walkthrough screencast below to see how it can be achieved in X.

Below is the CSS used in the video and it should be added only in your page’s content CSS because it should not be applied globally because you’re overriding the body’s overflow which was designed to be hidden in our theme.

body {
    overflow-x: visible;
}
.x-section .category-header {
    position:-webkit-sticky;
    position:sticky;
    top:60px;
    z-index:99;
}

Please also note that the code here is just to show that you can achieve this sticky behavior in X. That code or snippet will not be supported and will not be enhanced by us as custom development is outside the scope of our support.

Hope that helps.

[jlukes42]

Thanks for your input—I appreciate the video and explanation!

I was looking for a much more complicated conflict—it was pretty simple after all. Thanks again!

[ruenel]

You’re welcome!
We’re glad we were able to help you out.