如何修复“上”和“下”页面上的多个导航

Question

正在处理导航，当用户向下滚动页面导航时应隐藏红色和绿色的多层，而当用户向上滚动页面时，绿色导航部分应显示为没有红色部分。

我尝试使用滚动jQuery固定绿色部分，但红色部分由于位置而隐藏。

$(function (){
	var lastScrollTop = 50;
  $(window).scroll(function(){
      var st = $(window).scrollTop();
      if (st >= 181){
      // alert('down');
      $('.nav').addClass('down');
      $('.nav').removeClass('up');
    } else {
      // alert('up');
      $('.nav').removeClass('down');
      $('.nav').addClass('up');
    }
    lastScrollTop = st;
  });
});

body, html {
  maring: 0; padding: 0;
}

.top-header {
  height: 25px; background-color: red;
}
.nav {
  height: 75px; background-color: green;
}
.sec-1 {
  margin-top: 75px;
}
img {
    width:100%; display: block;
  }

.stiky {
  transition: .3s all;
}
.down {
  position: fixed; top: -75px; width: 100%; left: 0; right: 0;
}
.up {
  position: fixed; top: 0px; width: 100%; left: 0; right: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="top-header">
  
</div>
<header class="nav stiky">
  
</header>
<section class="sec-1">
  <div>
    <img src="https://data.whicdn.com/images/23540823/original.jpg" alt="img-1">
  </div>
</section>

对于输出，当用户向下滚动> = 100时，弧度和绿色部分均消失。当用户向上滚动时，在用户伸出<= 100滚动条后，绿色部分出现而没有弧度部分。所有内容应与下图相同。请找到图片附件。