making one navbar Sticky when user scrolls

Question

I have two navbars. Let’s say a user navbar on top, and a primary navbar under the user navbar.

I want to have a sticky primary navbar when the user scrolls.

What exactly im trying to do is making the navbars similar to my fav game website header, here https://playoverwatch.com/en-us/ See how the first navbar nicely disappears when you scroll and the second one sticks on top? I really want to have something similar or maybe exactly like this.

#ipsLayout_header header {
    margin-bottom: 15px;
    background-color: rgba(2,25,72,.3);
}
.ipsLayout_container {
    max-width: 1340px;
    padding: 0 15px;
}
.ipsNavBar_primary {
    background: #304d66;
}

<div id="ipsLayout_header">
    <header>
        <div class="ipsLayout_container"><!-- my first navbar -->
            <ul id="elUserNav">
                <li id="cCreate">
				links
                </li>
            </ul>
        </div>
    </header>  	
    <nav class="ipsLayout_container"><!-- my second navbar -->
        <div class="ipsNavBar_primary">
            <ul class="ipsResponsive_block">
                <li id="elNavSecondary_34">
                links
                </li>	
            </ul>
        </div>
    </nav>
</div>

Answer 1

Here is code. Make header div fixed to top and on scroll give top minus as much upper-menu height.

css -

#ipsLayout_header{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  display: block;
  z-index: 10;
  background: #fff;
  -webkit-transition: .3s all 0s ease;
  -moz-transition: .3s all 0s ease;
  transition: .3s all 0s ease;
}

js-

$(window).scroll(function () {
  var scroll = $(window).scrollTop();
  var headerHeight = $('header').outerHeight();
  if (scroll >= 100) {
    $("#ipsLayout_header").css('top', -headerHeight);
  }
  else {
    $("#ipsLayout_header").css('top', '0');
  }
});

JSFiddle -https://jsfiddle.net/dhananjaymane11/wvykLqxb/1/