12:40
Buy Me a Beer

Webflow Scroll Offset

Easily fix Sticky and Fix Navbar scroll offset issue with VisualDX.

How to add scroll offset with a Webflow sticky navbar

Firstly, make sure you have the VisualDX script before your </body>. Checkout the Quick Start for how to do this.

Add Attribute Attribute to Webflow Navbar

Copy this attribute:

vdx-scroll-offset

Paste the attribute into the Navbar Custom Attributes Name field. The attribute will calculate the height of the Navbar and the offset will be set to that value.

Navbar
Navbar
Style
Settings
Interactions
Settings
Custom Attributes
Name
vdx-scroll-offset
Value

Set Customise Offset

To add a custom Offset value add a number with a unit into the Navbar Custom Attributes value field.


Accepted units: REM, px, VH, VW, and %. When using % it is calculated based off the Navbar. e.g/ 150% gives an offset of 150% of the height of the Navbar

Navbar
Navbar
Style
Settings
Interactions
Settings
Custom Attributes
Name
vdx-scroll-offset
Value
150%

Publish

Sponsor the Magic and
Buy Me a Beer

Ailín Tobin
Ireland

VisualDX is a free JavaScript library made for Webflow nerds like yourself. No ads, no paywalls—just pure, unfiltered JavaScript magic to supercharge your builds. If it’s saving you time, making your development easier, or just making you feel like a wizard in the Webflow Designer, consider slinging a virtual coffee my way.

Think of it like buying me a pint for keeping your Webflow spells flowing.

You can support it here.

Cheers, legend!

This is a method based on community and soundness. If you can't afford it, don't worry... One of your fellow Webflow nerds has already helped you out by donating.