我想做一个可采用的粘性导航栏。我以前从来没有用Javascript做过自己的代码。
我的解决方案是制作两个粘性导航条，根据滚动显示/隐藏。

• 首先，在完成任何滚动之前，我的第一个导航栏（黄色）将是可见的，并且位于距离顶部100px的位置，即top:100px。
• 然后，当开始滚动时，我希望使用display:none使这个黄色<div>消失。
• 同样在滚动时，在黄色导航栏消失的同时，我会显示带有top:200px的橙色导航栏。
• 现在，橙色条从一开始就显示（错误地），但它不应该...在任何给定的时间只应该显示一个条。我希望条，两个<div>元素，在上下滚动多次时也保持出现/消失。

我的javascript和codepen有问题，他们抱怨$没有定义。
https://codepen.io/G1111/pen/RwBPrPR

$(window).scroll(function() {
  Testvariable = $(window).scrollTop();

  if (Testvariable == 0) {
    document.getElementById("stickys").style.display = "normal";
    document.getElementById("stickys2").style.display = "none";
  } else {
    document.getElementById("stickys").style.display = "none";
    document.getElementById("stickys2").style.display = "normal";
  }
});

#stickys {
  top: 100px!important;
  background-color: yellow;
  height: 100px;
  position: fixed;
  position: fixed!important;
  box-sizing: border-box;
  margin: 0 0% 0 0%!important;
  padding: 0!important;
  width: calc(60vw - 0%);
  left: calc(20vw - 0%);
  right: calc(20vw - 0%);
  width: calc(100vw - 0%);
  left: 0px;
  right: 0px;
  opacity: 1;
}

#stickys2 {
  top: 200px!important;
  background-color: orange;
  height: 100px;
  position: fixed;
  position: fixed!important;
  box-sizing: border-box;
  margin: 0 0% 0 0%!important;
  padding: 0!important;
  width: calc(60vw - 0%);
  left: calc(20vw - 0%);
  right: calc(20vw - 0%);
  width: calc(100vw - 0%);
  left: 0px;
  right: 0px;
  opacity: 1;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="stickys">
  My first sticky navigation bar. Show initially, then hide when slighest scroll, that is when Testvariable>0. Here, top:100px
</div>
<div id="stickys2">
  My second sticky navigation bar. Hide initially, then show when slighest scroll, that is when Testvariable>0. Here, top: 200px.
</div>
.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>