Positionnement fixe dans Safari Mobile

Question

Est-il possible de positionner un élément fixe par rapport à la fenêtre dans Safari Mobile? Comme beaucoup l'ont noté, position: fixed ne fonctionne pas, mais Gmail vient de sortir avec une solution que presque est ce que je veux -. Voir la barre de menu flottant sur la vue du message

Obtenir des événements de défilement en temps réel en JavaScript serait également une solution raisonnable.

Answer 1

iOS 5 a support pour la position. fixe

Answer 2

Cette div de position fixe peut être atteint en seulement 2 lignes de code qui déplace la div sur défilement vers le bas de la page.

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

Answer 3

Voir la solution Google à ce problème. Vous avez essentiellement pour faire défiler vous contenu en utilisant JavaScript. Sencha tactile fournit également une bibliothèque pour obtenir ce comportement dans un manoir très performant.

Answer 4

il a fonctionné pour moi:

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

$(document).bind('scroll', function() {
  changeFooterPosition();
});

(44 est la hauteur de mon bar)

Bien que la barre ne se déplace à la fin du rouleau ...

Answer 5

Cela peut vous intéresser. Il est la page de support d'Apple Dev.
http://developer.apple.com/library/ios/#technotes/ TN2010 / tn2262 /
Lire le point « 4. Modifier le code qui repose sur le positionnement fixe CSS » et vous trouverez qu'il ya une très bonne raison pour laquelle Apple a pris la décision consciente de gérer position fixe comme statique.

Answer 6

Je pense que gmail suit simplement la position de défilement sur une minuterie et un repositionne div en conséquence.

La meilleure solution que j'ai vu est doctyper .

Une solution plus simple jQuery qui déplace un élément onscroll: lien

Answer 7

Vous pouvez essayer d'utiliser tactile de défilement, un plugin jQuery qui imite le défilement avec des éléments fixes sur Safari mobile: https : //github.com/neave/touch-scroll

Voir un exemple avec votre appareil iOS à http://neave.github.com/touch-scroll /

Ou une alternative est iScroll: http://cubiq.org/iscroll

Answer 8

Voici comment je l'ai fait. J'ai un bloc de navigation qui est en dessous de la tête une fois que vous faites défiler la page vers le bas il colle »en haut de la fenêtre. Si vous faites défiler en arrière vers le haut, nav remonte à sa place J'utilise position: fixed en CSS pour les plateformes non mobiles et iOS5. D'autres versions mobiles ne sont que « lag » jusqu'à ce que l'écran cesse de défiler avant qu'il ne soit réglé.

// 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' });
            }
        };

Answer 9

<meta name="viewport" content="width=320, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/> 

En outre en vous assurant height=device-height n'est pas présent dans cette balise meta aide à prévenir le rembourrage de pied de page supplémentaire qui ne devraient normalement pas exister sur la page. La hauteur de la barre de menu ajoute à la hauteur de la fenêtre provoquant un fond fixe pour devenir scrollable.

Answer 10

Ici vous pouvez voir ce que (mobile) navigateurs prennent en charge position fixe + css il la version.

http://caniuse.com/css-fixed

Answer 11

Notre application web nécessite un en-tête fixe. Nous avons la chance que nous avons seulement pour soutenir les navigateurs les plus récents, mais le comportement de Safari dans ce domaine nous a fait un vrai problème.

La meilleure solution, comme d'autres l'ont souligné, est d'écrire notre propre code de défilement. Cependant, nous ne pouvons pas justifier cet effort pour résoudre un problème qui se produit uniquement sur iOS. Il est plus logique d'espérer que Apple peut résoudre ce problème, d'autant plus que, comme Quirksmode suggère, Apple est aujourd'hui seul dans leur interprétation de « position: fixed ».

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

Ce qui a fonctionné pour nous est de basculer entre « position: fixe » et « position: absolute » selon que l'utilisateur a zoomé. Cela remplace notre tête « flottante » avec un comportement prévisible, ce qui est important pour la facilité d'utilisation. Lorsque vous zoomez, le comportement est pas ce que nous voulons, mais l'utilisateur peut facilement contourner ce problème en inversant le 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";
    });
}