Hi, I am about to make my first site / portfolio using webflow. I am struggling to get a video background
sticky. The div stacking is a mess of course lol. The video is inside “section 6”. I want the video to be revealed after the introduction has been scrolled above like a curtain. I have set top position = 0 in sticky and checked if other parent divs has overflow hidden etc… still with no luck. What to do?
UNRELATED > it seems like you have body overflow set to hidden. That’s blocking the scroll on my end
And it turns out that it’s actually the body set as hidden that is blocking the position sticky. However, you still need to re-structure your page in order to achieve the wanted effect
okay, I changed that body overflow but nothing happend other than making the site to get a horizontal scroll type of effect… well, I guess I have to re-structure the page…ahh like sitting with a rubix cube the first time.
The horizontal scroll is caused by those rotation effects you have. You still need something to wrap everything and hide the overflow. It just can’t be the body element: By hiding the overflow of the body, you end up locking the scroll of the website.
An element that has its position set as sticky will only move inside it’s parent: that’s why I wrapped section 6 and wrapper-images inside a div
1 Like
hi, thanks for you replies. Did the re-structure work for you when you created a new div block and placed wrapper-images and section 6 inside that one? I tried to do the same now but with no luck.
A side note: but cant you have overflow hidden on the body as long as you have another wrapper with height 500% VH for instance?
after some more testing I have got the sticky working. Now I only need to remove that horizontal scroll without affecting the sticky effect again…
And finally I removed the horizontal scroll by setting body to “flex box” vertical direction with align center!
Yes. Re-arranging was only a part of the solution. You had to change some position settings for some elements as well. I’m glad to know you got it working.
Nope. The body is a special element and there are some hidden limitations to it. I always avoid messing too much with it in order to reduce the amount of problems that might show up. One of those limitations is the overflow:hidden locking the scroll. But that’s not really a bad feature: It’s great to lock the scrolling of the website when the user opens a modal for example.
I’m glad to know you got everything figured out! Feel free to get in touch in case you need something else in the future
1 Like