How to keep a fixed distance between two elements while scrolling

Question

 <div class="header__secondary" style="height:40px; background-color:green"> nav1 </div> <div class="header header--layout-2" style="position: sticky; top: 0; height:40px; background-color:red"> nav2 </div> <div class="header header--layout-2" style="position: fixed; height:40px; margin-top:20px; background-color:yellow"> elm </div> <br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br> <br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br></br> 

How can I make the yellow elm always have a fixed distance from the nav2 ? The problem is that right now if you scroll down the distance between nav2 and elm will increase because of the nav1

Answer 1

Not sure if I understood correctly what you need... but if I did, it should be something like this:

 <div class="header__secondary" style="height:40px; background-color:green"> nav1 </div> <div class="header header--layout-2" style="position: sticky; top: 0; height:40px; background-color:red"> nav2 </div> <div class="header header--layout-2" style="position: sticky; top: 45px; margin-top: 5px; height: 40px; background-color:yellow"> elm </div> <br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br> <br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br></br> 

Answer 2

You can wrap elm inside div2 with absolute positioning. Also, assign a top attribute for a fixed distance. Hope it helps.

 <div class="header__secondary" style="height:40px; background-color:green"> nav1 </div> <div class="header header--layout-2" style="position: sticky; top: 0; height:40px; background-color:red"> nav2 <div class="header header--layout-2" style="position:absolute; height:40px;top:70px; background-color:yellow"> elm </div> </div> <br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br> <br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br></br>