向下滑动导航栏重叠

Question

我的导航栏按上下滚动。我的问题区域在英雄部分。我还有一个导航栏，它对英雄没什么特别的作用。

我试图让向下滑动导航栏不与第一个导航栏冲突。有时，当滚动到顶部时，幻灯片导航栏还没有上升，因此存在重叠。

如果滚动速度很慢，它可以正常工作，但我希望向下滑动导航栏向下滑动大约一半的英雄部分和相同的备份。

＆＃13;

＆＃13;

this.onscroll = function() {
	"use strict";
	scrollNav();
};

function scrollNav() {
	"use strict";
    if (document.body.scrollTop > 250 || document.documentElement.scrollTop > 250) {        
		document.getElementById("navbar").style.top = "0";		
    } else {
        document.getElementById("navbar").style.top = "-90px";
    }
}

＆＃13;

#navbar {
 -webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);
  -ms-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);
  z-index: 100;
  border-bottom: 1px solid #000;
  background: rgba(0,0,0,.9);
  position: fixed;
  top: -90px;
  width: 100%;
  height: 90px;
  display:block;
  transition: top .5s cubic-bezier(.5,.25,.015,1) 0s, opacity .5s cubic-bezier(.5,.25,.015,1) 0s,height .5s cubic-bezier(.5,.25,.015,1) 0s;
	
}

#navbar .header__menu2 {
	float: right;
	display: inline-block;
	height: 90px;
	padding-top: 32px;
	vertical-align: middle;
	font-family: "nimbus-sans-condensed" , sans-serif;
	font-weight: 400;
	font-size: 18px;
	text-transform: uppercase;
}

#navbar .header__menu2 {
	padding-right: 15px;
}
#navbar .header__menu2 a {
	color: #a3a3a3;
	line-height: 24px;
	display: inline-block;
	margin-left: 15px;
	text-decoration: none;
}

#navbar .header__menu2 a:hover {
	color: #e1382c;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="height: 100vh; width: 100vw;">hero</div>
<div id="navbar">  
	<div class="header__main2">		
		<nav class="header__menu2">
			<a href="#">Link</a>
			<a href="#">Link</a>
			<a href="#">Link</a>
			<a href="#">Link</a>
			<a href="#">Link</a>
			<a href="#">Link</a>
		</nav>	 			   			   
      </div>
</div>

<div style="height: 900px;">section 2</div>

＆＃13;

＆＃13;

＆＃13;