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:
- Utilizar CSS (
transition: all easy-out 0.1s;
, conforme abaixo)
- 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>