Feste Positionierung in Mobile Safari

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.

iOS 5 unterstützt Position: behoben .

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

Siehe Googles Lösung für dieses Problem . Grundsätzlich müssen Sie den Inhalt selbst mit JavaScript scrollen. Sencha Touch bietet auch eine Bibliothek, um dieses Verhalten in einem sehr performanten Herrenhaus zu erhalten.

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 ...

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.

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

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

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

<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.

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

http://caniuse.com/css-fixed

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