Sticky section

[JohannesVogt]

Hey,

I’m trying to make the background image of a section sticky. So I want the section to scroll until it reaches the top and then stop. Is there any way to achieve this?

thx
Joe

[ruenel]

Hello Joe,

Thanks for writing in!

Normally, the section background image goes along as you scroll the page. If you want the background image as fixed, please add the following CSS code in the X > Theme Options > Global CSS (http://prntscr.com/evui3r)

.x-section .x-bg .x-bg-layer-lower-image,
.x-section .x-bg .x-bg-layer-upper-image {
  background-attachment: fixed;
}

We would love to know if this has worked for you. Thank you.

[JohannesVogt]

Well, it‘s not 100% what I intend. I want a whole section to behave like a sticky element. I.e. as I scroll down the section comes into view and then stays fixed once it reaches the top of the viewport.
Using different Z indexes I want the sections that are further down to slide above the previous section.

I know that CSS has a „fixed“ and „sticky“ function. Somehow only the fixed function seems to work for whole sections.

[lely]

Hi @JohannesVogt,

Sticky section is not yet available. Those shared by @RueNel are sticky/fixed background for section. It doesn’t include the content of the section.

What you are trying to achieve can be built with this: https://github.com/senff/Sticky-Anything1 or a plugin that is based on that. There’s already a feature request for this one. I will add you in it.