Estou usando a técnica de Marius Craciunoiu para exibir toda a minha navbar quando o usuário rolar a tela para cima.
Então, aqui está meu código JavaScript (usando jQuery):
var delta, didScroll, lastScrollTop, navbarHeight;
delta = 5;
lastScrollTop = 0;
navbarHeight = $('.navbar').outerHeight();
$(window).on('scroll touchmove', function() {
didScroll = true;
});
setInterval(function() {
if (didScroll) {
hasScrolled();
didScroll = false;
}
}, 250);
function hasScrolled() {
var scrollTop = $(this).scrollTop();
if (Math.abs(lastScrollTop - scrollTop) <= delta) { return; }
if (scrollTop > lastScrollTop && scrollTop > navbarHeight) {
$('.navbar').addClass('scrolling');
} else {
if (scrollTop + $(window).height() < $(document).height()) {
$('.navbar').removeClass('scrolling');
}
}
lastScrollTop = scrollTop;
}
Para facilitar, eu coloquei o meu código no http://jsfiddle.net/caio/7HrK7/. Se você quiser testar no iOS, será necessário entrar por outro endereço http://fiddle.jshell.net/caio/7HrK7/show/light/.
VIDEO: http://hiperload.com/s/ua5k53n0x/d.mp4?inline
Como vocês podem ver, meu código funciona no desktop e em telefones Android, mas no iOS, é necessário inserir um evento touch para responder enquanto o evento de rolar acontece, ou então a ação só será disparada no final do movimento. Eu tentei adicionar o evento touchmove
, mas sem sucesso. Vocês podem me ajudar?