I am looking to create two fixed navigation bars, one at the top and another in the center of the page. The idea is that when scrolling reaches the second nav bar, the first one should hide (or become relative) and the second one should become fixed. Then, as we scroll back up, the second nav bar should become relative again and the first one will reappear.
Check out this fiddle for reference
<div id="nav01">
</div>
<div class="content"></div>
<div id="nav02">
</div>
<div class="content"></div>
#nav01
{
height: 100px;
background: red;
width: 100%;
position: fixed;
top: 0;
}
#nav02
{
height: 100px;
background: blue;
width: 100%;
}
.content
{
height: 2000px;
background: #ccc;
width: 100%;
}
I have looked into various jQuery plugins but haven't found them useful. Since I'm not proficient in scripting, I would appreciate any assistance you can provide. Thank you in advance!