Is Webflow the platform used to build the website with a fixed half and scrolling section?
TL;DR
- Use Flexbox to create a two-column layout with one side fixed (using sticky or fixed positioning and 100vh height) and the other side scrollable (with overflow and auto height).
- Add scroll interactions for dynamic effects, and adjust layout to stack vertically on mobile for better usability.
Yes, Webflow can be used to create a website layout where one half is fixed and the other half scrolls. This design is often seen in portfolio websites or product showcases and is achievable using Flexbox, position settings, and scroll interactions within Webflow.
1. Use Flexbox for Two-Column Layout
- Set the parent container to
display: flexwith horizontal direction (row) to create a two-column layout. - Add two child
divblocks: one for the fixed half and one for the scrolling content.
2. Make One Side Fixed
- Select the fixed half’s
div, and set its position tostickyorfixedrelative to the viewport. - Set top: 0 and a specified height of 100vh to anchor it.
3. Enable Scrolling on the Other Side
- Set the scrolling side of the container to have auto height and
overflow: auto(if inside another scrollable container) or allow it to scroll naturally as part of the page. - Add your dynamic or rich content here so it scrolls while the other side remains static.
4. Optional: Add Scroll Interactions
- Use Webflow’s Interactions panel to animate elements when the scroll progresses on the scrollable half.
- You can tie animations or transitions to the scroll position of elements, including parallax effects or fading content.
5. Mobile Considerations
- On smaller breakpoints, consider stacking the layout vertically to maintain usability.
- You can switch the layout to
flex-direction: columnfor mobile with appropriate spacing.
Summary
Webflow fully supports the design pattern where one section remains fixed (using sticky or fixed positioning) while the other section scrolls. Use Flexbox, appropriate position settings, and optional interactions to achieve this layout.