html,body { margin: 0px; padding: 0px; } header { text-align: center; } nav { text-align: center; background-color: yellow; padding: 10px 0px; width: 100%; position: sticky; top: 0; } .content { height: 2000px; } .active { position: fixed; top: 0px; }
<header> <h1>header</h1> </header> <nav> <p> 1111 2222 3333 4444 </p> </nav> <div class="content"> </div>