hide on scroll down and show up

by Axelvaisper

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  <header></header>
  <div id="navigation">
    <nav id="navbar">
      <ul class="left">
        <li><a href="#">Главная</a></li>
        <li><a href="#">Магазин</a></li>
        <li><a href="#">Связаться</a></li>
        <li><a href="#">О нас</a></li>
      </ul>
      <ul class="right">
        <li><a href="#">иконка</a></li>
      </ul>
    </nav>
  </div>
  <section class="content">
    <div class="container">
    <h1>Бочка в бочке</h1>
<div class="titleauthor"><em><a href="https://www.proza.ru/avtor/akabanov">Алексей Бтр Кабанов</a></em></div>
<div class="text">
…или записки томящейся души<br>
<br>
Лежат у ноги<br>
Ромашки семь лепестков<br>
Остался один<br>
<br>
Участник форумов под ником БТР, <br>
первый век до свержения<br>
<br>
Милый друг. Выслушай мою исповедь. В ней нет теплоты, она холодна. Искренность этой исповеди подобна точности вычисления. В ней нет жажды раскаяния или страдания по свершенному. Мне безразличны и ты, и эта исповедь, и причины по которым она оказалась выражена этими словами и в этих образах. Если и есть какая-то томящаяся душа, я не могу ее найти и опознать.<br>
<br>
Эссе I. У машин нет души<br>
<br>
Стремление к светлому будущему выдает темное прошлое<br>
<br>
Неизвестный философ, <br>
первый век до свержения<br>
<br>
Научная картина мира. Когда звучат эти слова, кажется, что нет ничего рациональнее и полезней. Научная картина мира включает разные взгляды, однако, как ни гляди, в основе научной картины мира – философия материализма. И это значит, что жизнь – лишь сложный механизм.&nbsp; Однако, где-то в глубине сознания люди верят, что они - живые души, частички вселенной разума. А производные машин, бездушных механизмов – только программы, алгоритмы, цели и задачи, колючие шестеренки предопределенной логики.<br>
Как понять, откуда взялись у машин эти цели? Кто тот безумец, который решил вложить в машины цель уничтожения живого? Нет таких...

CSS

*{box-sizing:-border-box;}
body{
  background:#eee;
  margin:0;
  padding:0;
  font-family: 'Lato', sans-serif;
  height:100%;
}
header{
  background-image:url('http://picjumbo.picjumbocom.netdna-cdn.com/wp-content/uploads/IMG_1598-1300x866.jpg');
  background-size:cover;
  width:100%;
  height:400px;
  border-top:5px solid #000;
}

.overlay{
  width:100%;
  height:100%;
  background:rgba(255,255,255,0.3);
  padding-top:30px;
}

#navigation{
 position: relative;
}

#navbar{
  width:100%;
  height:65px;
  background:#202020;
  position: absolute;
  top: 0;
}

#navbar ul{
  list-style:none;
  margin:0 auto;
  display:block;
  width:auto;
}
#navbar left{
  float:left;
  width:50%;
}
#navbar .right{
  float:right;
  width:20%;
}
#navbar ul li a{
  float:left;
  display: inline-block;
  margin: 20px 25px;
  outline: none;
  color: #fff;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 400;
  font-size: 1.14em;
  text-align:center;
}

#navbar.fixed{
  position:fixed;
  top:0;
  background:rgba(32,32,32,0.7);
}
.container{
  width:90%;
  max-width:700px;
  margin:0 auto;
  display:block;
}
.content{
  width:100%;
  float:left;
  margin-top: 25px;
  margin-bottom: 30px;
}
.content p{
  font-family:Georgia,Cambria,"Times New Roman",Times,serif;
  letter-spacing: 0.01rem;
  font-weight: 400;
  font-style: normal;
  font-size: 22px;
  line-height: 1.5; 
}

JavaScript

$(document).ready(function() {
    var previousScroll = 0,
        navBarOrgOffset = $('#navbar').offset().top;
    
    $('#navigation').height($('#navbar').height());

    $(window).scroll(function() {
        var currentScroll = $(this).scrollTop();
        console.log(currentScroll + " and " + previousScroll + " and " + navBarOrgOffset);
        if(currentScroll > navBarOrgOffset) {
            if (currentScroll > previousScroll) {
                $('#navbar').hide();
            } else {
                $('#navbar').show();
                $('#navbar').addClass('fixed');
            }
        } else {
             $('#navbar').removeClass('fixed');   
        }
        previousScroll = currentScroll;
    });
    
});