How to do Youtube Music fixed menu effect

Question

I would like to bring this effect from the Youtube Music app menu to my website. Basically it rolls together with the page when going down and back to appear when going up, in a fixed way.

My current attempt is not similar, when going down the page the menu goes up and when going up it goes down, but it is not according to the scrolling movement done, it rises instantly. Here you can see an example of the result of this attempt:

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

// should start at 0

$(window).scroll(function() {
    var scroll = $(window).scrollTop();
    if(scroll > position) {
        console.log('scrollDown');
        if(position > 45) {
            $('.a').addClass('mostra');
        }
    } else {
         console.log('scrollUp');
         $('.a').removeClass('mostra');
    }
    position = scroll;
});

body {
    height: 2000px;  
    background: orange;
}
.a {
    height: 50px;
    width: 50px;
    background-color: green;
    position: fixed;
    top: 0;
    transition: 0.5s;
}
.mostra {
  top: -50px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<div class="a"></div>

Tips??

Answer 1

This image shows an app, and this is an iOS feature that can be easily obtained in the Objectivec language.

I researched something similar in Javascript, but couldn’t find it. So I took up the challenge and developed my own version. It’s not perfect because I’m not a Javascript expert, much less a designer, but to smooth the scrolling you can:

1. Use CSS (transition: all easy-out 0.1s;, as below)
2. Use the library nicescrool for jQuery (on the Jsfiddle link you can see the result of this)

That said, follow the Jsfiddle link: Hide topbar with scrolling

/* Quando o usuario rola para baixo, esconde a topbar. Quando rola para cima, a topbar rola junto */
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;
}

#topbar {
  background-color: #333;
  top: 0px;
  width: 100%;
  position: fixed;
  z-index: 999;
  width: 100%;
  box-shadow: 0 0 3px #000;
  transition: all ease-out 0.1s;
  -webkit-transition: all ease-out 0.1s;
  -moz-transition: all ease-out 0.1s;
}

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

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

<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>