web-dev-qa-db-fra.com

Positionnement fixe dans Mobile Safari

Est-il possible de positionner un élément fixe par rapport à la fenêtre dans Mobile Safari? Comme beaucoup l'ont fait remarquer, position: fixed ne fonctionne pas, mais Gmail vient de proposer une solution qui correspond presque à ce que je veux - voir la barre de menus flottante dans la vue des messages.

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

javascriptiphonecssmobile-safari
67
Sophie Alpert

iOS 5 a le support de la position: fixe .

35
vava

Cette position fixe peut être obtenue en seulement 2 lignes de code, ce qui la fait défiler en bas de page.

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

Voir La solution de Google à ce problème . Vous devez essentiellement faire défiler le contenu vous-même en utilisant JavaScript. Sencha Touch fournit également une bibliothèque pour obtenir ce comportement dans un manoir très performant.

10
JoshNaro

cela 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 qu'à la fin du défilement ...

6
Raphael Petegrosso

Cela peut vous intéresser. C'est la page de support Apple Dev. 
http://developer.Apple.com/library/ios/#technotes/tn2010/tn2262/

Lisez le point "4. Modifiez le code reposant sur le positionnement fixe CSS" et vous découvrirez qu'il existe une très bonne raison pour laquelle Apple a délibérément pris la décision de gérer la position fixe de manière statique.

5
iDevGeek

Je pense que gmail ne fait que suivre la position du défilement sur une minuterie et repositionne une div en conséquence.

La meilleure solution que j'ai vue est chez doctyper .

Une solution jQuery plus simple qui déplace un élément sur un script: link

4
rpetrich

Vous pouvez essayer d'utiliser touch-scroll, un plugin jQuery qui imite le défilement d'é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

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

S'assurer également que height=device-height n'est pas présent dans cette balise méta permet d'éviter un remplissage de pied de page supplémentaire qui n'existerait normalement pas sur la page. La hauteur de la barre de menus s’ajoute à la hauteur de la fenêtre, ce qui fait qu’un fond fixe devient défilable.

1
Talvi Watia

Voici comment je l'ai fait . J'ai un bloc de navigation qui se trouve sous l'en-tête une fois que vous avez fait défiler la page vers le bas, il "reste" en haut de la fenêtre . à sa place J'utilise position: corrigé en CSS pour les plates-formes non mobiles et iOS5 . Les autres versions mobiles ont ce "décalage" jusqu'à ce que l'écran arrête de défiler avant qu'il ne soit défini.

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

Ici, vous pouvez voir quels navigateurs (mobiles) supportent la position de CSS fixée + leur version.

http://caniuse.com/css-fixed

0
Anna Smother

Notre application Web nécessite un en-tête fixe. Nous avons la chance de ne supporter que les navigateurs les plus récents, mais le comportement de Safari dans ce domaine nous a posé un véritable 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 ne se produit que sur iOS. Il est plus logique d'espérer qu'Apple puisse résoudre ce problème, d'autant plus que, comme le suggère QuirksMode, Apple est désormais seul dans son 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: absolue" selon que l'utilisateur a zoomé ou non. Cela remplace notre en-tête "flottant" par un comportement prévisible, ce qui est important pour la convivialité. Lorsque vous zoomez, le comportement n'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";
    });
}
0
Heman