A guide on using a Fixed Navbar with a 100vh Section anchor

[imtiazraqib]

Hello Hello Webflow Fam ,

Over the past few weeks, I have been noticing a lot of forum questions regarding anchor links on a 100vh Section incorporated with the Webflow Navbar element and setting its position to Fixed. Apparently, on anchor-scrolling, it causes a skip which can be seen below:

At least for me, it does not occur when I create my own Fixed Navbar but occurs when you use Webflow’s Navigation Element and switch it to fixed.

However, there is a workaround which can be used if this happens to you:

1. Set your desired Section to position: relative
2. Add a div class="anchor" with an appropriate id, say anchor__%section_name%
3. Set anchor div’s position to absolute-top
   
   

Now we do a little math 👀

• Figure out the height of your navbar, in my case, it is 60px.
• Now, set the height of your anchor div to 60px
• Also, set amargin-top on your anchor div of 60px OR add the offset with your absolute positioning

Your designer should have a preview as such:

• Repeat this for all your desired sections

4. Now, set your nav-links to point to this anchor div instead

And you are done

Now instead of the buggy, glitchy, skippy animation to your 100vh section, you get that serene, beautiful, elegant scroll to section

I hope this helps y’all. Let me know if you have any questions.
Here is a read-only link if you want to look at the project structure in depth.

Happy Designing!

[webdev (Jeff Selser)]

@imtiazraqib - Thanks for sharing!

[imtiazraqib]

Of course, anytime!

[iDATUS]

Likes it.
I seem to be fixated watching the slides go up and down!

[imtiazraqib]

HAHAHA @iDATUS , snap-scrolling makes me feel the same