Hi all,
I’m trying to achieve a design where the two images of the skyline originally take up the whole screen, but then shift to the left/right respectively showing the text underneath it. Every image is 100% width because they’ve been generated in a way that they all fit together (i.e. every image has transparent space). My issue is that my text (middle image) is longer than my side images. I want the side images to be sticky and adapt dynamically to the height of the middle image, but it seems that to overlap them, I need to set them as absolute and remove them from the flow (so they don’t inherit the right height). Any ideas?
Here is my site Read-Only: LINK
(how to share your site Read-Only link)
Hi there,
To implement sticky side images in Webflow, follow these key steps:
- Select your image element
- In the Style panel, set Position to “Sticky”
- Set a position value (usually “Top: 0”)
- Ensure the parent container:
- Has no fixed height
- Has overflow set to “visible”
- Is tall enough for the sticky effect to be noticeable
For optimal results, your sticky element should be inside a container that’s longer than the viewport height. This allows the element to “stick” while scrolling through the content.
Common troubleshooting:
- If the sticky effect isn’t working, check that no parent elements have overflow set to hidden, scroll, or auto
- Verify that the sticky element has enough space to move within its parent container
- Ensure the parent container doesn’t have a height that’s too restrictive
Hopefully this helps! If you still need assistance, please reply here so somebody from the community can help.
Still having the issue of overlapping them and using sticky.