Posicionamento fixo no Mobile Safari

É possível posicionar um elemento fixo em relação à viewport no Mobile Safari? Como muitos notaram, position: fixed não funciona, mas o Gmail acabou de sair com uma solução que quase é o que eu quero – veja a barra de menu flutuante na canvas de mensagens.

Obter events de rolagem em tempo real em JavaScript também seria uma solução razoável.

iOS 5 tem suporte para posição: fixo .

Esta posição fixa div pode ser alcançada em apenas 2 linhas de código, o que move a div na rolagem para a parte inferior da página.

 window.onscroll = function() { document.getElementById('fixedDiv').style.top = (window.pageYOffset + window.innerHeight - 25) + 'px'; }; 

Veja a solução do Google para este problema . Você basicamente precisa rolar o conteúdo usando JavaScript. O Sencha Touch também fornece uma biblioteca para obter esse comportamento em uma mansão de muito desempenho.

funcionou para mim:

 function changeFooterPosition() { $('.footer-menu').css('top', window.innerHeight + window.scrollY - 44 + "px"); } $(document).bind('scroll', function() { changeFooterPosition(); }); 

(44 é a altura do meu bar)

Embora o bar só se mova no final do pergaminho …

Isso pode interessar você. É a página de suporte da Apple Dev.
http://developer.apple.com/library/ios/#technotes/tn2010/tn2262/

Leia o ponto ” 4. Modifique o código que depende do posicionamento fixo do CSS ” e você descobrirá que há uma boa razão pela qual a Apple tomou a decisão consciente de lidar com a posição fixa como estática.

Eu acho que o gmail apenas rastreia a posição de rolagem em um timer e reposiciona um div acordo.

A melhor solução que vi foi no doctyper .

Uma solução jQuery mais simples que move um elemento onscroll: link

Você poderia tentar usar o scroll de toque, um plugin jQuery que imita a rolagem com elementos fixos no Safari móvel: https://github.com/neave/touch-scroll

Veja um exemplo com o seu dispositivo iOS em http://neave.github.com/touch-scroll/

Ou uma alternativa é iScroll: http://cubiq.org/iscroll

Foi assim que eu fiz. Eu tenho um bloco de navegação que está abaixo do header, uma vez que você rolar a página para baixo, ‘adere’ ao topo da janela. Se você rolar de volta para o início, o nav voltará ao lugar em que eu uso a posição: fixo em CSS para plataformas não móveis e iOS5. Outras versões para celular têm esse atraso até que a canvas pare de rolar antes de ser definido.

 // css #sticky.stick { width:100%; height:50px; position: fixed; top: 0; z-index: 1; } // jquery //sticky nav function sticky_relocate() { var window_top = $(window).scrollTop(); var div_top = $('#sticky-anchor').offset().top; if (window_top > div_top) $('#sticky').addClass('stick'); else $('#sticky').removeClass('stick'); } $(window).scroll(function(event){ // sticky nav css NON mobile way sticky_relocate(); var st = $(this).scrollTop(); // sticky nav iPhone android mobile way iOS<5 if (navigator.userAgent.match(/OS 5(_\d)+ like Mac OS X/i)) { //do nothing uses sticky_relocate() css } else if ( navigator.userAgent.match(/(iPod|iPhone|iPad)/i) || navigator.userAgent.match(/Android/i) || navigator.userAgent.match(/webOS/i) ) { var window_top = $(window).scrollTop(); var div_top = $('#sticky-anchor').offset().top; if (window_top > div_top) { $('#sticky').css({'top' : st , 'position' : 'absolute' }); } else { $('#sticky').css({'top' : 'auto' }); } }; 
  

Além disso, garantir que height=device-height não esteja presente nesta meta tag ajuda a evitar preenchimento de rodapé adicional que normalmente não existiria na página. A altura do menu aumenta a altura da janela de exibição fazendo com que um plano de fundo fixo se torne rolável.

Aqui você pode ver o que os navegadores (móveis) suportam css posição fixa + lá versão.

http://caniuse.com/css-fixed

Nosso aplicativo da web requer um header fixo. Temos a sorte de termos apenas suporte aos navegadores mais recentes, mas o comportamento do Safari nessa área nos causou um problema real.

A melhor solução, como outros apontaram, é escrever nosso próprio código de rolagem. No entanto, não podemos justificar esse esforço para corrigir um problema que ocorre apenas no iOS. Faz mais sentido esperar que a Apple consiga resolver esse problema, especialmente porque, como sugere QuirksMode, a Apple agora está sozinha em sua interpretação da “posição: fixa”.

http://www.quirksmode.org/blog/archives/2013/12/position_fixed_1.html

O que funcionou para nós é alternar entre “position: fixed” e “position: absolute” dependendo de o usuário ter ampliado. Isso substitui nosso header “flutuante” por um comportamento previsível, o que é importante para a usabilidade. Quando ampliado, o comportamento não é o que queremos, mas o usuário pode facilmente contornar isso invertendo o zoom.

 // On iOS, "position: fixed;" is not supported when zoomed, so toggle "position: absolute;". header = document.createElement( "HEADER" ); document.body.appendChild( header ); if( navigator.userAgent.match( /iPad/i ) || navigator.userAgent.match( /iPhone/i )) { addEventListener( document.body, function( event ) { var zoomLevel = (( Math.abs( window.orientation ) === 90 ) ? screen.height : screen.width ) / window.innerWidth; header.style.position = ( zoomLevel > 1 ) ? "absolute" : "fixed"; }); }