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: flex with horizontal direction (row) to create a two-column layout.  
  • Add two child div blocks: 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 to sticky or fixed relative 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: column for 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.

Rate this answer

Other Webflow Questions