web-dev-qa-db-fra.com

Comment résoudre la position: corrigé pour une barre d'outils inférieure sur iOS (iPhone/iPad)

J'ai une barre qui est fixée au bas de chaque page de mon site Web en utilisant position: fixed. Le problème est que sur des appareils tels que l'iPhone ou l'iPad, cette propriété n'est pas respectée.

J'ai essayé d'utiliser javascript pour déterminer la hauteur de l'écran, la position du défilement, et cela fonctionne parfaitement sur l'iPad:

$( window ).scroll( function ( ) { $( "#bar" ).css( "top", ( $( window ).height() + $( document ).scrollTop() - 90 ) +"px" );  } );

Comme vous pouvez le voir, jQuery est utilisé. Le problème est que ce code ne fonctionne pas tout à fait sur l'iPhone car la hauteur de la fenêtre n'inclut pas la barre d'emplacement (ni la barre de débogage si présente), de sorte que la barre se place au bon endroit au début, mais lorsque vous faites défiler, elle devient fixé au-dessus de la bonne position (quantité de pixels utilisée par la barre d’emplacement de Mobile Safari).

Existe-t-il un moyen d'obtenir ces informations et de corriger correctement cette barre d'outils?

N'oubliez pas que ce n'est pas un site Web conçu pour iPhone, je ne peux donc pas utiliser d'astuces comme iScroll.

javascriptiphoneiostoolbarfixed
17
Wesley de Souza

Depuis iOS 8.4, vous pouvez utiliser position: sticky; respectivement position: -webkit-sticky; pour résoudre ce problème.

4
kraftwer1

Je viens de faire quelque chose comme cela, en collant la navigation sur leHAUTde la fenêtre. La navigation commence sous l'en-tête puis reste bloquée si vous faites défiler passé. IOS5 prend en charge positionnement fixe. L'élément s'aligne sur la positionAPRÈSle défilement se termine, mais fonctionne toujours bien. '#sticky-anchor' est un diviseur enveloppant ma navigation.

Je ne me souviens pas d’où j’ai trouvé tout cela, de petites pièces de nombreux sites. Vous pouvez l’ajuster à vos besoins.

$(window).scroll(function(event){

// sticky nav css NON mobile way
   sticky_relocate();

   var st = $(this).scrollTop();

// sticky nav iPhone Android mobile way
// iOS 4 and below

   if (navigator.userAgent.match(/OS 5(_\d)+ like Mac OS X/i)) {
        //do nothing uses sticky_relocate above
   } 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
g.simms

Je ne peux que vous indiquer certaines directions:

1
Nick Weaver

J'ai corrigé ceci sur mon site et j'ai répondu à cela lors du débordement de pile. Depuis lors, j'ai reçu une tonne de remerciements de la part de ceux qui l'ont mis en œuvre. Désolé je n'ai pas le temps pour un résumé. 

https://stackoverflow.com/a/10030251/1118070

1
Ryan Ore

iScroll probaply est la solution la plus simple à votre problème. Contrairement à ce que vous pensez, cela fonctionne également pour Android et l'opéra. La nouvelle version de celui-ci est superbe. 

http://cubiq.org/iscroll-4

0
Tosh

Ce morceau de code jQuery a fonctionné pour moi:

if(navigator.platform == 'iPad' || navigator.platform == 'iPhone' || navigator.platform == 'iPod'){
    $("#footer_menu").css("position", "fixed").css("top", $('window').height());
};

sinon, le css pour #footer_menu était:

position:fixed;
bottom:0;
width:100%;
padding:5px 0;
text-align:center;
height:44px;

Je pense que le réglage de la hauteur a aidé à rendre le rendu correctement et sur un navigateur de bureau, je voulais que ce menu soit fixé au bas de la fenêtre du navigateur.

0
budgell