Skip to content

Instantly share code, notes, and snippets.

@arshad-yaseen
Last active June 4, 2022 02:32
Show Gist options
  • Save arshad-yaseen/14ed99dc00069b6b24d23e2cfec49840 to your computer and use it in GitHub Desktop.
Save arshad-yaseen/14ed99dc00069b6b24d23e2cfec49840 to your computer and use it in GitHub Desktop.
Stop fixed navigations covering content on scroll - Here Is The Codepen Link ( https://codepen.io/Arshad-Yaseen/pen/eYVKXLN )
<nav class="navigation-bar">
<ul class="nav-list">
<li><a href="#section-1">Home</a></li>
<li><a href="#section-2">About</a></li>
<li><a href="#section-3">My Work</a></li>
<li><a href="#section-4">Contact</a></li>
</ul>
</nav>
<section id="section-1" class="home" ></section>
<section id="section-2" class="about" ></section>
<section id="section-3" class="my-work" ></section>
<section id="section-4" class="contact" ></section>
const navigationBarHeight = document.querySelector('.navigation-bar').offsetHeight;
document.documentElement.style.setProperty('--scroll-padding', navigationBarHeight - 1 + "px");
html {
scroll-behavior: smooth;
scroll-padding-top: var(--scroll-padding);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment