Menu 2 effects: one for scrolling down and one for opposite

Question

Hello, I’m wondering how to make a menu (jquery). It becomes apparent at the top of the site, when running 100 px from the top down, it hides (ok so far I managed to do), and is hidden until the end of the site. At the end, and the reverse scrolling happens, from bottom to top, the menu soon appears, with a background (activates another css) and so follows to the top. What function I call to identify the scroll from bottom to top?

Answer 1

Save the current scrollTop in a variable and in the next scroll check whether it was larger or smaller:

var scrollbkp = $(window).scrollTop(); // inicia a variável global com o scrollTop atual

$(window).scroll(function() {
  if ($(window).scrollTop() > scrollbkp) {
    // scroll para baixo
    console.log('para baixo');
  } else {
    // scroll para cima
    console.log('para cima');
  }
  scrollbkp = $(window).scrollTop(); // regrava o scrollTop para verificar na próxima vez
});

.conteudo {
height: 2500px;
background-color:#ddd;
}
.as-console-wrapper {
max-height: 50px!important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="conteudo">
conteudo...
</div>