5

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?

2 Respostas 2

2

Não é possível fazer isso no iOS. Há uma explicação aqui:

http://developer.apple.com/library/IOs/#documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html

Basicamente, o vento só funciona quando inicia o toque na tela e quando para de tocar, quando você move não é realizado nenhum evento.

Para comprovar, fiz esse código abaixo em JavaScript para mostrar os segundos enquanto toca na tela, e só funciona quando inicia o toque e quando solta, se ficar segurando a tela e movendo não funciona:

var iOS = ( navigator.userAgent.match(/(iPad|iPhone|iPod)/g) ? true : false )
    if (iOS){
    document.addEventListener('touchmove', function() {
        $('#emtemporeal').html((new Date()).getSeconds());
    }, false);
}

Eu já havia passado por isso uma vez ao customizar um navbar e acabei desabilitando isso ao acessar pelo iPad, mas o motivo principal nem foi por causa desse detalhe, foi mais porque o navbar fixo ocupa no iPad um espaço considerável, visto que a tela é pequena comparada a um desktop.

0

Meu palpite é que você não deve usar o evento touchmove, já que o Safari só vai executar o código "depois" do ultimo step do scroll da viewport.

No video, fica bem evidente isso, então você pode tentar usar o evento touchend e touchcancel, pois eles serão executados logo após o gesto touch.

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 .