Menu
I have a sticky navbar. When the page loads, the first home div displays properly. But, after scrolling down, and then back up, some of the content from the home div is hidden by the sticky nav bar at the top. How can I fix this behavior? Any suggestions are appreciated!
window.onscroll = () => {
myFunction()
};
const navbar = document.getElementById("navbar");
const sticky = navbar.offsetTop;
myFunction = () => {
if (window.pageYOffset >= sticky) {
navbar.classList.add("sticky")
} else {
navbar.classList.remove("sticky");
}
}body {
padding: 0px;
margin: 0px;
}
#navbar {
overflow: hidden;
background-color: #000;
}
#navbar a {
float: right;
display: block;
text-align: center;
padding: 1vw;
text-decoration: none;
font-family: 'Muli', sans-serif;
font-size: 2.5vw;
font-weight: 400;
font-style: italic;
}
.color-nav a {
color: white;
}
.active {
background-color: #fff;
color: black !important;
}
.sticky {
position: fixed;
top: 0;
width: 100%;
}
.main-section {
height: 45vw;
}<body>
<header>
<nav>
<div class='color-nav' id="navbar">
<a id='contact-link' href="#contact">Contact</a>
<a id="about-link" href="#about">About</a>
<a id='portfolio-link' href="#portfolio">Portfolio</a>
<a id='home-link' class="active" href="#home">Home</a>
</div>
</nav>
</header>
<section>
<div id='home-1' class="home main-section">
</div>
</section>
<section>
<div id="portfolio-1" class="portfolio main-section">
</div>
</section>
<section>
<div id="about-1" class='about main-section'>
</div>
</section>
<section>
<div id='contact-1' class='contact main-section'>
</div>
</section>
</body>
926
The problem is that when you scroll you are adding the position of fixed to the #navbar so you are taking it out of the flow of the page and fixing it to the screen. In doing this you are taking it out of the <nav> and the <header> and these elements are now going to have a height of 0. If you inspect your #navbar with chrome dev tools you can see that it is 31px tall ,in my window at least, it may be different in your window since you coded it to have a padding in vw wich if you ask me is not a very good practice so you may want to rethink that and give it a padding in px, em, or rem so an easy fix would be to just give the parent div, either <header> or <nav> a height of 31px or whatever your navbars height is so when you take the navbar out of the page flow you won't lose the navs height when its gone so something like the following:
header{
height:31px;
}
Here it is in a snippet:
window.onscroll = () => {
myFunction()
};
const navbar = document.getElementById("navbar");
const sticky = navbar.offsetTop;
myFunction = () => {
if (window.pageYOffset >= sticky) {
navbar.classList.add("sticky")
} else {
navbar.classList.remove("sticky");
}
}body {
padding: 0px;
margin: 0px;
}
header{
height:31px;
}
#navbar {
overflow: hidden;
background-color: #000;
}
#navbar a {
float: right;
display: block;
text-align: center;
padding: 1vw;
text-decoration: none;
font-family: 'Muli', sans-serif;
font-size: 2.5vw;
font-weight: 400;
font-style: italic;
}
.color-nav a {
color: white;
}
.active {
background-color: #fff;
color: black !important;
}
.sticky {
position: fixed;
top: 0;
width: 100%;
}
section{
height:100vh;
border:5px solid green;
} <header>
<nav>
<div class='color-nav' id="navbar">
<a id='contact-link' href="#contact">Contact</a>
<a id="about-link" href="#about">About</a>
<a id='portfolio-link' href="#portfolio">Portfolio</a>
<a id='home-link' class="active" href="#home">Home</a>
</div>
</nav>
</header>
<section>
<div id='home-1' class="home main-section">
</div>
</section>
<section>
<div id="portfolio-1" class="portfolio main-section">
</div>
</section>
<section>
<div id="about-1" class='about main-section'>
</div>
</section>
<section>
<div id='contact-1' class='contact main-section'>
</div>
</section>But if if you are just going to have your navbar at the top of the page anyway there is no reason to have any of this javascript you can just add padding to the top of the body and give the navbar a position of fixed. There is no reason to have any of these scroll events at all. Adding the javascript scroll events like these are for if you have something above your navbar and you want it to fix after scrolling down the page a ways. Here is a snippet of that:
body {
padding: 0px;
padding-top:31px;
margin: 0px;
}
nav{
position:fixed;
top:0;
width:100%;
}
#navbar {
overflow: hidden;
background-color: #000;
}
#navbar a {
float: right;
display: block;
text-align: center;
padding: 1vw;
text-decoration: none;
font-family: 'Muli', sans-serif;
font-size: 2.5vw;
font-weight: 400;
font-style: italic;
}
.color-nav a {
color: white;
}
.active {
background-color: #fff;
color: black !important;
}
section{
height:100vh;
border:5px solid green;
} <nav>
<div class='color-nav' id="navbar">
<a id='contact-link' href="#contact">Contact</a>
<a id="about-link" href="#about">About</a>
<a id='portfolio-link' href="#portfolio">Portfolio</a>
<a id='home-link' class="active" href="#home">Home</a>
</div>
</nav>
<section>
<div id='home-1' class="home main-section">
</div>
</section>
<section>
<div id="portfolio-1" class="portfolio main-section">
</div>
</section>
<section>
<div id="about-1" class='about main-section'>
</div>
</section>
<section>
<div id='contact-1' class='contact main-section'>
</div>
</section>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
