How can I make one column sticky and one column scrollable in the About Us section of my Webflow Grid?
TL;DR
- Set Grid height to at least 100vh and apply position: sticky with top: 0 to the column you want fixed.
- Ensure the scrollable column contains overflow content, and avoid nesting sticky elements inside containers with overflow: hidden.
To make one column sticky and the other scrollable in your Webflow Grid layout (e.g., in an About Us section), you'll need to apply sticky positioning to one column while allowing the other to overflow normally.
1. Configure the Grid Layout
- Select your Grid element in the Navigator.
- Make sure you have two columns (e.g., left for sticky content, right for scrollable content).
- Set the height of the Grid or its parent wrapper to at least 100vh to enable full viewport height and scrolling behavior.
2. Set Up the Sticky Column
- Select the column (or the element inside the column) you want to make sticky.
- Apply the following style settings:
- Position: Sticky
- Top: 0px
- This will keep the element fixed at the top of the viewport as the user scrolls down the other column.
3. Set Up the Scrollable Column
- Select the other column, usually the right one.
- Place your content (text, images, etc.) into a Div Block inside this column for better control.
- By default, this column should scroll freely as long as the content overflows the viewport height.
4. Ensure Proper Container and Overflow Settings
- Make sure the parent section or Grid has no overflow restrictions (set to "visible") so the sticky behavior can operate correctly.
- Confirm the element with sticky positioning is not nested inside another element with overflow: hidden, as that will block its sticky behavior.
5. Handle Responsiveness
- Review the layout in Tablet and Mobile views. Sticky positioning may not work as expected on smaller screens.
- Consider disabling sticky behavior on smaller breakpoints if it impacts usability.
Summary
Set your Grid to at least 100vh height, apply position: sticky and top: 0 to the left column (or its child element), ensure the right column scrolls naturally by keeping its overflow visible, and avoid conflicting container styles. This setup allows one column to stay fixed while the other scrolls.