Skip to content

Instantly share code, notes, and snippets.

@payamomrani

payamomrani/Fix Sticky navigation element jumps during scroll

Created October 6, 2019 06:40
Show Gist options
  • Save payamomrani/e71b082839a94be149fd99ef25ac731a to your computer and use it in GitHub Desktop.
Save payamomrani/e71b082839a94be149fd99ef25ac731a to your computer and use it in GitHub Desktop.
Download ZIP
Raw
Fix Sticky navigation element jumps during scroll
You can get around this by wrapping your navigation element in a new div - let's call it nav-wrapper
- and set its height to the same as your navigation element.
These are known as placeholder elements.
This new wrapper and your original navigation bar must always be the same height for the 'jump' to disappear.
<div class="nav-wrapper" style="height:80px;"> <-- add this
<div class="your-original-nav" style="height:80px"></div>
</div> <!-- add this
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment