Side bar slide off screen on scroll down and back on scroll up with hover to slide in

Side bar slide off screen on scroll down and back on scroll up with hover to slide in

Hi.
I have a side navigation bar which slides in when you hover over the long black bar on the side but i want it to be on screen by default when the user is at the top off the page and slide off with the same animation when the user scrolls down a certain amount but i also want the navbar to slide back in when the user hovers over the side just like it is now i watched many tutorials but none integrate well with what i want to do.

   HTML

  1.       <div id="navbarhide">
  2.        <div id="navbar">
  3.          <nav id="primary_nav_wrap">
  4.     <ul>
  5.    <li class="current">Home</li>
  6.    <a href="#"><li class="link">Services</li></a>
  7.    <li><a href="#">About us</a></li>
  8.    <li><a href="#">Contact</a></li>
  9.    <li style="margin-left: 3px"><a href="#">EN</a></li>
  10.        </ul>
  11.   
  12.         </nav>
  13.       </div>
  14.     </div>
    CSS


  • #navbarhide{
  •  border-left: 20px solid rgba(0,0,0,0.80);
  • border-top: 10px solid transparent;
  • border-bottom: 10px solid transparent;
  • width: 10px;
  • height: 90%;
  • position: fixed;
  • left: 0px;
  • top: 3%;
  •     z-index: 1000
  • }


  • #navbar{
  •   border-left: 90px solid rgba(20,20,20,0.90);
  • border-top: 50px solid transparent;
  • border-bottom: 50px solid transparent;
  • width: 0px;
  • height: 82.5%;
  • position: absolute;
  • left: -200px;
  • transition:all 0.5s ease;
  • }

  • #navbarhide:hover > #navbar {
  •   left:0px;
  • }

  • .current {
  • color: crimson;
  • font-size: 120%;

  • }

  • #navbar ul {
  • list-style: none;
  •     position: absolute;
  • padding-left: 0px;
  • text-align: left;
  • left: -85px;
  • margin-top: 45px;
  • border-radius: 5px;
  • }

  • #navbar ul li{

  •     padding: 35px 10px 35px 5px;
  • display:block;
  • }

  • #navbar ul a{
  • color: rgba(255,255,255,0.80);
  • }

  • #navbar ul li:hover > a{
  • color: rgba(134,134,134,0.88);
  • }




  • #primary_nav_wrap ul li:hover > ul
  • {
  • display:block;
  • }

Thanks.