Hey Team, I’m trying to get this curtain effect to work again. I have no clue why it randomly stopped working.
I have a single page website with multiple sections at 100VH.
Each section could be about, contact, informations, pictures.
As you scroll vertically it just shows those sections.
Theres a section in the middle of the page where I want to have a curtain effect.
The bottom layer will be sticky and its a social media feed.
The top layer is a gradient color that covers the bottom layer slightly…
As you scroll to this section, the bottom layer will stay, while you scroll… the gradient will reveal the bottom layer. The bottom will not now move until the top layer gradient is done scrolling and then you can continue to scroll down pass the social media feed to other sections of the page.
^Hopefully that makes sense… I been cracking at this for 15 hours now… still counting!
If anyone can guide me in the right direction again! thank you.
You must specify at least one position value for the top, bottom, left, or right side for sticky positioning to work. This depends on where your element is positioned within the parent and how you’re scrolling, vertically or horizontally.
Hey cyberdave! Thank you so much for replying back so fast. You wouldn’t believe how happy I was to see you able to do it! I definitely had a big laugh of relief.
I had read the article you posted. Definitely some good resources.
I had attempted on my own with the mock up link I sent. And it worked perfectly.
Now attempting it on a project I’m doing. And it would not stick at all.
Can you take a look at what I’m doing wrong here?
It will be under the parallax background 2 section.
Hi @Anchen_Huang, thanks for your reply, it could be, the html embed is not rendered in the designer, only on the published site.
Also, I would check the structure in general, it seems you have sections nested inside of divs, I would reverse that to put sections under the body, then elements that will be sticky in divs, and divs nested inside of sections. That may not be the issue, but that is good practice to put sections directly under the body and then try to put all the sticky elements directly under the section.
If you put the section 23 class to position sticky with an offset of 100 px, does the site render ok on the published site?
The site renders properly. with the embed social media, and then the gradient top layer right ontop of it.
It just doesnt stick when i scroll.
The weird thing Dave, the mock template I sent you, and you were able to get the sticky done. I formatted the file structure the same way as my project.
There is likely a difference somewhere that can be sometimes tricky if the difference is small, but enough to make an impact, I will be happy to check further, I will post if I can find a solution.
I might also test without the embed, and instead use an image instead to see if the behavior will work with another type of element, other than the embed.
@cyberdave Morning Dave, so I spent some time, recreating a new project.
Attempting the same curtain effect.
I was able to get the curtain effect work in editor mode, but once I publish and go to the published website. The curtain effect does not work.
Could there be a bug with Webflow being able to publish parallax curtain effects?
that can be sometimes tricky if the difference is small, but enough to make an impact, I will be happy to check further, I will post if I can find a solution.