Esconder topbar com rolagem

by gpublio

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.nicescroll/3.7.6/jquery.nicescroll.min.js"></script>
<div id="topbar">
  <a href="#home">Home</a>
  <a href="#news">Notícias</a>
  <a href="#contact">Contato</a>
</div>
<div style="padding:15px 15px 2500px;font-size:30px;margin-top:30px;">
  <p>Lorem ipsum dolor dummy text sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
    irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  <p>Lorem ipsum dolor dummy text sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
    irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

CSS

#topbar {
  background-color: #333;
  top: 0px;
  width: 100%;
  position: fixed;
  z-index: 999;
  width: 100%;
  box-shadow: 0 0 3px #000;
}

#topbar a {
  float: left;
  display: block;
  color: white;
  text-align: center;
  padding: 15px;
  text-decoration: none;
}

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

JavaScript

/* Quando o usuario rola para baixo, esconde a topbar. Quando rola para cima, a topbar rola junto */
$("body").niceScroll(); // plugin jquery que imita comportamento de um app na rolagem
var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
  var currentScrollPos = window.pageYOffset;
  var topbarPosition = document.getElementById("topbar").style.top;
  //é preciso multiplicar por -1 pq a regex não converte o sinal
  var posNum = parseInt(topbarPosition.replace(/[^0-9]/g, '')) * (-1);
  if (isNaN(posNum)) posNum = 0; //corrige o valor inicial se nao for um numero
  if (prevScrollpos > currentScrollPos) {
    //scroll up
    if (posNum <= 0) {
      posNum = posNum - parseInt(currentScrollPos - prevScrollpos);
      if (posNum > 0) posNum = 0;
    } else posNum = 0;
    document.getElementById("topbar").style.top = posNum + "px";
  } else {
    //scroll down
    if (posNum >= -50) {
      posNum = posNum - parseInt(currentScrollPos - prevScrollpos);
      if (posNum < -50) posNum = -50;
    } else posNum = -50;
    document.getElementById("topbar").style.top = posNum + "px";
  }
  prevScrollpos = currentScrollPos;
}