Making a section sticky/ parallax effect for the header section

[PNP]

Hi i have a website where i need to add a parallax effect to one of the section, or make it sticky so that all the other elements and sections will flow over it. I tried the sticky anything plugin, also tried some sticky section jquery code and css. Nothing worked for my design.
Can you guys have a suggestion for me, this is the website url,

Grove City Dental

The first blue section in the home page need to be sticky or a parallax effect should enable on it. Thanks!

[friech]

Hi Grant,

Thank you for writing in, the first blue section has no background so you can’t apply a parallax effect on it.

I think what you’re trying to do is to position: fixed; that section. If so, please add this to that section’s Element CSS area.

$el.x-section {
	position: fixed;
}

Then apply a top-margin to the next section so it does not overlap with the blue section initially.

Cheers!

[PNP]

thanks for the code, i tried this before but all the other sections will flow over the top section.

[christian]

Hey Grant,

I’m sorry I’m not 100% what you want to achieve. If you want the whole section to be sticky, it would be best to duplicate your existing header and build that section as a header bar so you can set it to sticky.

Please note that the parallax effect is not sticky. If you enable parallax in a section, the elements inside the section would scroll while the background would slowly go with the scroll. The Parallax feature is best explained in our Background Partial video tutorial at https://theme.co/apex/forum/t/elements-using-partials/

After watching the tutorial, please detail what element should be sticky and what element should be parallax. We need to know that exact effect you’re trying to achieve.

Thanks.