What is the proper way to make the section with the Background video class stick for a longer time in Webflow? Should I add a sticky position to the background video or the section it is in, and why isn't it working on mobile view?
TL;DR
- Apply position: sticky with top: 0px to the section containing the background video, not the video itself.
- Ensure the parent element has enough scroll height and avoid overflow: hidden to maintain sticky behavior.
- Sticky may not work on mobile due to browser limitations, so consider using Webflow scroll interactions as a workaround.
To make a section containing a Background Video “stick” longer during scrolling, you should apply sticky positioning and adjust your layout correctly. However, position: sticky doesn’t work consistently on mobile due to browser and Webflow limitations.
1. Apply Sticky to the Correct Element
- Add
position: stickyto the Section, not the background video element itself. - Sticky works best when applied to a container-level element (like a section or div block), not media components like videos.
- Set a
topvalue (e.g.,top: 0px) to determine when the section should start “sticking” in the viewport.
2. Ensure Proper Parent/Container Setup
- Sticky elements must be inside a scrollable parent (often the body or a section that is taller than the sticky element).
- If the parent doesn’t have enough height, sticky positioning won’t appear to work.
- Avoid setting
overflow: hiddenon parents, as that can break sticky behavior.
3. Why It’s Not Working on Mobile
- Most mobile browsers, including Safari and Chrome on iOS and Android, limit or disable
position: stickydue to touch behavior and performance constraints. - Webflow’s built-in preview might also misrepresent sticky behavior on smaller screens.
- Additionally, the sticky section may appear non-functional if:
- The parent section is too short.
- There is not enough scrollable content after the sticky element.
- CSS overflow settings are interfering.
4. Optional Mobile Workarounds
- Avoid using sticky on mobile: Use an alternate static layout for mobile breakpoints.
- Use interactions instead of sticky: Create a scroll-based animation in Webflow using the While Scrolling in View trigger to simulate sticking behavior.
Summary
Apply position: sticky; top: 0px to the section containing the Background Video, not the video itself. Sticky behavior may not work on mobile due to browser limitations and should be replaced with interactions if needed. You must ensure that the section’s parent has enough scroll height and doesn’t use overflow: hidden.
