How can I make a section sticky in Webflow when the previous section still has 15vh before it is off the screen without using absolute positioning?

Published on
September 22, 2023

To make a section sticky in Webflow when the previous section still has 15vh before it is off the screen without using absolute positioning, you can use the "position: sticky" property combined with the "top" property. Here's how you can achieve this:

  1. Select the section you want to make sticky and navigate to the Styles panel.
  2. Under the Position section, set the position to "sticky".
  3. Adjust the "top" value to the desired distance from the top of the viewport. In this case, set it to "15vh".
  4. Save and preview your site to see the section become sticky when scrolling.

By following these steps, you can achieve a sticky section effect in Webflow without relying on absolute positioning.

Example:

/* Select the section you want to make sticky */.section-sticky {  position: sticky;  top: 15vh;}

Please note that the "position: sticky" property has some browser compatibility issues, specifically with older versions of Internet Explorer. However, it is widely supported by modern browsers and is the recommended method for creating sticky sections in Webflow.

Additional questions:

  1. How do I create a sticky navbar in Webflow?
  2. Can I make an element sticky within a container in Webflow?
  3. What alternative positioning options are available in Webflow besides "sticky"?