How can I make one column sticky and one column scrollable in the About Us section of my Webflow Grid?
TL;DR
- Create a two-column grid with divs inside each column.
- Set the left column to sticky with a top offset and ensure parent elements don’t have overflow hidden.
- Set the right column’s height and overflow if internal scrolling is needed; otherwise, leave it normal.
- Adjust section height and responsiveness for proper sticky behavior across devices.
To make one column sticky and the other scrollable in your Webflow grid layout, you’ll need to apply positioning styles correctly. Here’s how to do it:
1. Create a Two-Column Grid
- Add a Grid to your About Us section (e.g. two columns, one row).
- Drag two Div Blocks into each column — name them something like "Left Column" and "Right Column" for clarity.
2. Set the Left Column to Sticky
- Select the Left Column Div.
- In the Style panel, set Position to Sticky.
- Set the Top distance value (e.g.,
top: 40px) — this defines when the sticky effect begins as the user scrolls. - Ensure that a parent element (the section or a wrapper) doesn’t have
overflow: hidden– this would disable sticky behavior.
3. Make the Right Column Scrollable
- Select the Right Column Div.
- To allow scrolling within the right column independently (if content overflow exists), set:
- Height to a fixed value or
100vh(viewport height). - Overflow to Auto.
- Only do this if you want the right column to scroll inside itself. If you want it to scroll with the page content, no special setting is needed—just don’t apply
position: stickyto it.
4. Adjust Section Height & Layout
- Ensure the parent Section or Wrapper has enough height for sticky behavior to activate.
- If your grid collapses on smaller viewports, consider switching to a flex layout with media queries or using a single-column layout on mobile.
5. Test Responsiveness
- Use Webflow’s preview and responsive views to make sure sticky columns behave well across devices.
- Consider disabling sticky behavior on smaller screens if it interferes with layout flow.
Summary
Set the left column to position: sticky with a top offset, and leave the right column scrollable or normal depending on the desired behavior. Use Webflow’s grid and positioning tools, and ensure no parent elements prevent the sticky effect by setting overflow: visible.
