Navbar with fixed position staying on the top while header disappear
<p>I want to make navbar with fixed position. At the top of the page the navbar should be under the header and after scrolling down when header is no longer visible the navbar should be at the top of the page. How can I do that? When I try to do it after scrolling down between the navbar and top of the page is still the height of the header(even though it is no longer visible).</p>

<p>Here is my css:</p>

<pre><code>header{
  background-color: red;
  width: 100%;
  height: 100px;
}
nav{
  position: fixed;
    float:left;
  height: 100px;
  width: 100px;
    margin-left: 10px;
    margin-right: 50px;
    margin-top:50px;
    background-color: green;  
}
main{

background-color: blue;
height: 1500px;
margin-left:15%;
margin-right:5%;
margin-top:50px;

}
</code></pre>

<p>and jfiddle: <a href="https://jsfiddle.net/pg2kwk5e/" rel="nofollow">https://jsfiddle.net/pg2kwk5e/</a></p>