Using javascript to show/hide <div> when scrolling-CodePudding

I want to make an adoptive sticky navigation bar. I have never made my own code in Javascript before.

My solution to this is to make two sticky navigation bars that show/hide based on scrolling. My solution is like this:

First, before any scrolling is done, my first navigation bar (yellow) will be visible and positioned 100px from the top, that is having top:100px.
Then, when scrolling is initiated, I would like this yellow <div> to disappear using display:none.
Also upon scrolling, at the same time as the yellow navigation bar disappears, I would reveal the orange navigation bar with top:200px.
Right now, the orange bar is showing (wrongfully) from the start but it should not...only one bar should be shown at any given time. I want the bars, the two <div> elements, to keep appear/disappear also when scrolling up and down multiple times.

Something is wrong with my javascript and codepen is complaining about $ being undefined.

$(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>

CodePudding user response：

First, replace display = "normal"; with display = "block";.

Then, you could call $(window).scroll(); after binding the scroll event handler to show/hide your navbars according to the window scroll position :

$(window).scroll(function() {
  Testvariable = $(window).scrollTop();
  if (Testvariable == 0) {
    document.getElementById("stickys").style.display = "block";
    document.getElementById("stickys2").style.display = "none";
  } else {
    document.getElementById("stickys").style.display = "none";
    document.getElementById("stickys2").style.display = "block";
  }
});

$(window).scroll();

#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>