How can I tell all sections below my crimson hero section to to scroll over that section while it appears to stay in place? (this is a one page / anchor nav site)
My hero section is percent based…it scales according to the percentage set for the large type .svg.
I do not code and am a beginner in webflow…so the simplest breakdown would be greatly appreciated.
“Simple paralax effect” get archived because of fixed position of background image. It means that background image on that area will never move, while all other parts of site are moving (and section with paralax are moving too, actually). It is how you would see the “content” from moving train window.
For archive same effect on the section that you want, you will have to make all elements inside it - position: fixed. In the same time, you have to make sure all other sections will have z-index higher than fixed content.
I understand what you’re saying and this works IF the hero section has a fixed height. I cannot have a fixed height on my hero section so I need the solution for that…
I have my hero section height set to auto so that at any screen size, the padding remains the same. When I set the height, this gets very messy. Can you help figure this out?
First: You can make the background a photo. with the text and everything. use a DIV block and make the background that background image, set it to fix
Second: or you can set the the div block with text and everything to Fixed position under the position are in the control panel.
Then set every section under that to relativ and Z-index: 1
Hey @anon55398716 if you set your “Hero div” to fixed position. Then give your hero section 50% padding on top. You’ll get the desired effect. You’ll need to adjust the top padding accordingly for other mobile break points. But that should take care of everything.
I give big thanks to all of you for sharing your knowledge and helping me with this—you all taught me something ! In the end, the percent based .svg in the hero section was the reason why the solutions didn’t work in this case. The answer required some custom code! Eeek. All set to go!
](https://preview.webflow.com/preview/cynple?preview=68f95fc2cdb04c745b4d8c00c7f7a72e5!%5B%7C690x311%5D(upload://hGXqppAxzXR653iRqJJc0BVJN0C.jpg)){kind=link}