Feste Positionierung in Mobile Safari

68

Ist es möglich, ein Element in Mobile Safari relativ zum Ansichtsfenster zu positionieren? Wie viele bemerkt haben, position: fixedfunktioniert es nicht, aber Google Mail hat gerade eine Lösung herausgebracht, die fast genau das ist, was ich möchte - siehe die schwebende Menüleiste in der Nachrichtenansicht.

Das Abrufen von Echtzeit-Bildlaufereignissen in JavaScript wäre ebenfalls eine vernünftige Lösung.

Sophie Alpert
quelle

Antworten:

35

iOS 5 unterstützt Position: behoben .

vava
quelle
1
Hab das heute morgen gesehen. Schließlich!
Sophie Alpert
1
Was ist mit anderen Mobilgeräten, die nicht unter iOS laufen?
Danielwell
20
Warum ist dies die akzeptierte Antwort? Es gibt immer noch viele Benutzer auf niedrigeren Versionen von iOS aus einem Grund wegen der fehlenden Unterstützung für dort Gerät ..
NickGreen
1
@NickGreen - da es für iOS 5 funktioniert, erwarten wir, dass Benutzer ihre alten Geräte in den Papierkorb werfen, was Sie mit Apple tun müssen, da die meisten Softwareprogramme auf älteren Telefonen nicht funktionieren.
Neil
12
Wenn Sie Position verwenden: Ab IOS 5.1.1 (oder früher) behoben, werden Sie wahrscheinlich in eine Welt voller Schmerzen geraten. Es ist fehlerhaft. Sehr fehlerhaft.
Tim Haines
74

Diese feste Position div kann in nur 2 Codezeilen erreicht werden, wodurch die div beim Scrollen zum Ende der Seite verschoben wird.

window.onscroll = function() {
  document.getElementById('fixedDiv').style.top =
     (window.pageYOffset + window.innerHeight - 25) + 'px';
};
Abhijit Kalamkar
quelle
8
Ist das nicht eine Verzögerung?
Changelog
25
onscroll wird erst nach Abschluss des Bildlaufs ausgelöst , sodass das Element mit der Seite einen Bildlauf durchführt und nach dem Bildlauf nach unten schnappt.
Bewilligung
13
Darüber hinaus unterstützt Mobile Safari jetzt hardwarebeschleunigte Transformationen. Also element.style.webkitTransform = "translate3d (0," + window.pageYOffset + "px, 0)"; wird tatsächlich schneller und weniger abgehackt ausgeführt als das Einstellen des Spitzenwerts.
Adam
@Adam: Weiß nicht warum, aber das hat bei mir nicht funktioniert. Das Element wird überhaupt nicht angezeigt. Vorher hatte es position:fixed;top:50%;left:50%;.
Testen
6

es hat bei mir funktioniert:

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

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

(44 ist die Höhe meiner Bar)

Obwohl sich der Balken nur am Ende der Schriftrolle bewegt ...

Raphael Petegrosso
quelle
5

Das könnte Sie interessieren. Es ist die Apple Dev Support-Seite.
http://developer.apple.com/library/ios/#technotes/tn2010/tn2262/

Lesen Sie den Punkt " 4. Ändern Sie den Code, der auf der festen CSS-Positionierung basiert", und Sie werden feststellen, dass es einen sehr guten Grund gibt, warum Apple dies vorgenommen hat die bewusste Entscheidung, feste Positionen als statisch zu behandeln.

iDevGeek
quelle
34
Unter diesem Link wird kein "sehr guter Grund" angegeben. Es wird lediglich versucht, die aktuelle Situation zu beschreiben.
Dominic Scheirlinck
4

Ich denke, Google Mail verfolgt nur die Bildlaufposition auf einem Timer und positioniert a diventsprechend neu.

Die beste Lösung, die ich gesehen habe, ist bei doctyper .

Eine einfachere jQuery-Lösung, die ein Element onscroll: link verschiebt

rpetrich
quelle
Wie erhält man dann die Bildlaufposition?
Sophie Alpert
Ich habe die einfachere Methode hinzugefügt, die onscroll verfolgt. Stöbern Sie in jQuery, um die genaue Methode zu finden. es könnte window.pageYOffset sein, aber ich bin nicht sicher
rpetrich
1
Das Problem mit doctyper ist, dass die Reaktionsfähigkeit des Telefons zu verzögern beginnt, wenn zu viel Inhalt zum Scrollen vorhanden ist ...
Gamma
3

Sie können versuchen, Touch-Scroll zu verwenden, ein jQuery-Plugin, das das Scrollen mit festen Elementen in Mobile Safari nachahmt: https://github.com/neave/touch-scroll

Ein Beispiel mit Ihrem iOS-Gerät finden Sie unter http://neave.github.com/touch-scroll/.

Oder eine Alternative ist iScroll: http://cubiq.org/iscroll

Neave
quelle
Ich habe beide benutzt. Beide funktionieren gut. iScroll 4 ist gründlicher, wenn Sie mehr als nur eine Bildlaufsteuerung (dh eine feste Positionierung) benötigen. Touch Scroll ist begrenzt und kleiner.
DoubleJosh
1

So habe ich es gemacht. Ich habe einen Navigationsblock, der sich unter der Kopfzeile befindet, sobald Sie die Seite nach unten scrollen. Er bleibt am oberen Rand des Fensters hängen. Wenn Sie nach oben scrollen, kehrt nav an die Stelle zurück, an der ich die Position verwende: In CSS für nicht mobile Plattformen und iOS5 behoben. Andere mobile Versionen haben diese Verzögerung, bis der Bildschirm nicht mehr blättert, bevor er eingestellt ist.

// 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' });
            }
        };
Gary
quelle
1
<meta name="viewport" content="width=320, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/> 

Wenn Sie außerdem sicherstellen, dass height=device-heightdieses Meta-Tag nicht vorhanden ist, können Sie verhindern, dass zusätzliche Fußzeilen nicht auf der Seite vorhanden sind. Die Höhe der Menüleiste erhöht die Höhe des Ansichtsfensters, wodurch ein fester Hintergrund scrollbar wird.

Talvi Watia
quelle
0

Hier können Sie sehen, welche (mobilen) Browser die CSS-Position fest + dort Version unterstützen.

http://caniuse.com/css-fixed

Anna Smother
quelle
0

Unsere Web-App benötigt einen festen Header. Wir haben das Glück, dass wir nur die neuesten Browser unterstützen müssen, aber das Verhalten von Safari in diesem Bereich hat uns ein echtes Problem bereitet.

Wie andere bereits betont haben, besteht die beste Lösung darin, unseren eigenen Bildlaufcode zu schreiben. Wir können diesen Aufwand jedoch nicht rechtfertigen, um ein Problem zu beheben, das nur unter iOS auftritt. Es ist sinnvoller zu hoffen, dass Apple dieses Problem beheben kann, zumal Apple, wie QuirksMode vorschlägt, jetzt allein in der Interpretation von "Position: behoben" steht.

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

Was für uns funktioniert hat, ist zwischen "Position: fest" und "Position: absolut" umzuschalten, je nachdem, ob der Benutzer gezoomt hat. Dies ersetzt unseren "schwebenden" Header durch vorhersehbares Verhalten, das für die Benutzerfreundlichkeit wichtig ist. Beim Zoomen ist das Verhalten nicht das, was wir wollen, aber der Benutzer kann dies leicht umgehen, indem er den Zoom umkehrt.

// 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";
    });
}
Heman
quelle