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

Hello Hello Webflow Fam :wave:,

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:

screen-capture

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

    Screen Shot 2021-08-26 at 1.03.45 PM

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
  1. Now, set your nav-links to point to this anchor div instead

And you are done :tada:

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

screen-capture (1)

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

Happy Designing! :grin::+1:

2 Likes

@imtiazraqib - Thanks for sharing!

1 Like

Of course, anytime! :grin:

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

1 Like

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