'2 sticky header (1 will slide up)

well, I have 2 sticky headers in bootstrap 4. after scroll down I want first header to slide up and second one will be top:0.
So I can write jquery for both headers:

when scroll down for example on 100px, first will go up on top -50px, and second one will go top:0.

When scroll up - first one will go on top:0 and second one top:50px.

But I wonder if there is another solution for this (easy one)

<div class="sticky-top navigation-1">

      FIRST HEADER

</div>

  

<div class="sticky-top navigation-2">

          SECOND HEADER

</div>
javascripthtmljquerycssbootstrap-4


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions