2

Gostaria de trazer esse efeito do menu do app do Youtube Music pro meu site. Basicamente ele rola junto com a pagina quando descendo e volta a aparecer quando subindo, de forma fixa.

gif do menu do YT Music

Minha tentativa atual não é semelhante, ao descer a página o menu sobe e ao subir ele desce, mas não é de acordo com o movimento de rolagem feito, ele sobe instantaneamente. Aqui podem ver um exemplo do resultado dessa tentativa:

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>

Dicas??

3
  • vc quer que quando chegar ao topo ele apareça é isso? Commented 12/12/2018 às 23:55
  • @GiovanniDias não... é quando rolar pra direção do topo que ele aparece. E quando em direção pra baixo ele sobe, ambos de acordo com o movimento de rolagem que está sendo feito. Commented 13/12/2018 às 8:53
  • 2
    Para referências futuras, chamamos esse efeito de waterfall. Pesquisando por navbar waterfall encontrará material sobre.
    – Woss
    Commented 13/12/2018 às 10:38

1 Resposta 1

3

Essa imagem mostra um app, e essa é uma característica do iOS que pode ser facilmente obtida na linguagem ObjectiveC.

Pesquisei algo semelhante em Javascript, mas não encontrei. Então topei o desafio e desenvolvi minha própria versão. Não é perfeito pois não sou especialista em Javascript, muito menos designer, mas pra deixar a rolagem mais suave você pode:

  1. Utilizar CSS (transition: all easy-out 0.1s;, conforme abaixo)
  2. Usar a library nicescrool pra jQuery (no link do JSFiddle você pode ver o resultado dessa)

Isto dito, segue o link do JSFiddle: Esconder topbar com rolagem

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

1
  • 1
    simplesmente genial!!! parabéns pela criação! e muito obrigado! Commented 13/12/2018 às 11:38

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .