Problem positioning top 2 DIVs when scrolling

Question

I am trying to make a webapp what has a 3 sections.

1 - A search bar. 2 - a navigation menu. 3 - The main content.

Ideally how I want it work is when the main content is scrolled down the search bar scrolls up out of site and the navigation goes to the top with the main content scrolling behind everything. But when scrolled up by any amount both the search bar and navigation scroll smoothly back to starting position and the main content remains where it is currently scrolled to.

I have tried it with sticky positioning and using jquery to detect scroll up and down but it all goes a little wierd. I also tried checking scroll just on main element and moving the other 2 accordingly but it was very jumpy, I hope I have explained it clearly.

The code is :

body {
  margin:0;
  padding:0;
  min-height:200vh;
  border:2px solid;
}.
search {
  height:50px;
  background:red;
  position:sticky;
  top:-50px;
  transition: all .2s ease-in-out;
}

.navbar {
  height:50px;
  background:blue;
  position:sticky;
  top:0px;
  transition: all .2s ease-in-out;
}
.main {
  height:100vh;
  background:green;
  position:sticky;
  top:50px;
  transition: all .2s ease-in-out;
}

<script src="https://code.jquery.com/jquery.js"></script>
<div id="search" class="search"></div>
<div id="navbar" class="navbar"></div>
<div id="main" class="main"></div>

Now when ran in a browser all 3 elements show but not in example?

I have tried adding this JS but no good? This is driving me mad as I am sure it is quite simple but I just can not figure it out, any help or advice would be greatly appreciated.

var position = $(window).scrollTop();

$(window).scroll(function() {
    var scroll = $(window).scrollTop();
    if(scroll > position) {
        console.log('scrollDown');

    document.getElementById("navbar").style.top = "0px";
    document.getElementById("navbar").style.position = "sticky";

    } else {
         console.log('scrollUp');
    document.getElementById("navbar").style.top = "50px";
    document.getElementById("navbar").style.position = "fixed";

    }
    position = scroll;
});

Answer 1

Is it ok to add 1 - A search bar. 2 - a navigation menu in one div? I tried with adding these two elements in one div. Also note that if you add CSS on search bar the height of navbar will be changed. So update that height in JS.

var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
var currentScrollPos = window.pageYOffset;
  if (prevScrollpos > currentScrollPos) {
    document.getElementById("navbar").style.top = "0";
  } else {
    document.getElementById("navbar").style.top = "-80px";
  }
  prevScrollpos = currentScrollPos;
}

body {
  margin: 0;
  background-color: #f1f1f1;
  font-family: Arial, Helvetica, sans-serif;
}

#navbar {
  background-color: #333;
  position: fixed;
  top: 0;
  width: 100%;
  display: block;
  transition: top 0.3s;
}

#navbar a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 15px;
  text-decoration: none;
  font-size: 17px;
}

#navbar a:hover {
  background-color: #ddd;
  color: black;
}

<div id="navbar">
  <div class="search">
  <form>
    <input type="serch">
    <input type="submit" vlaue="search"></button>
 </form>
  </div>
  <div class="navbar-links">
    <a href="#home">Home</a>
    <a href="#news">News</a>
    <a href="#contact">Contact</a>
    </div>
</div>

<div style="padding:15px 15px 1500px;font-size:30px;margin-top:30px;">
  <p><b>This example demonstrates how to hide a navbar when the user starts to scroll the page.</b></p>
  <p>Scroll down this frame to see the effect!</p>

</div>