html - 当用户滚动时使一个导航栏变粘

Question

我有两个导航栏。假设用户导航栏位于顶部，主导航栏位于用户导航栏下方。

我想在用户滚动时有一个粘性主导航栏。

我真正想做的是使导航栏类似于我最喜欢的游戏网站标题，此处为 https://playoverwatch.com/en-us/ 看到滚动时第一个导航栏如何很好地消失而第二个导航栏粘在顶部了吗？我真的很想拥有类似或完全像这样的东西。

#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

这是代码。将 header div 固定到顶部并在滚动时给顶部减去上层菜单高度。

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/