it-swarm.com.de

Position in Mobile Safari korrigiert

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

Echtzeit-Scroll-Ereignisse in JavaScript zu erhalten, wäre ebenfalls eine sinnvolle Lösung.

67
Sophie Alpert
35
vava

Diese feste Position div kann in nur zwei Zeilen Code erreicht werden, wodurch der Bildlauf nach div zum Seitenende verschoben wird.

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

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

10
JoshNaro

es hat für mich 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 Bildlaufleiste bewegt ...

6

Das könnte dich 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 festgelegte CSS-Positionierungen basiert", und Sie werden feststellen, dass es sehr gute Gründe dafür gibt, dass Apple die bewusste Entscheidung getroffen hat, die feste Position als statisch zu behandeln.

5
iDevGeek

Ich denke, gmail verfolgt nur die Bildlaufposition eines Timers und positioniert eine div entsprechend.

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

Eine einfachere jQuery-Lösung, mit der ein Element beim Scrollen verschoben wird: link

4
rpetrich

Sie können versuchen, Touch-Scroll zu verwenden, ein jQuery-Plugin, das das Scrollen mit festen Elementen auf mobiler 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

3
neave
<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-height in diesem Meta-Tag nicht vorhanden ist, können Sie das zusätzliche Auffüllen der Fußzeile verhindern, das normalerweise auf der Seite nicht vorhanden wäre. Durch die Höhe der Menüleiste wird die Höhe des Ansichtsfensters erhöht, wodurch ein fester Hintergrund scrollbar wird.

1
Talvi Watia

So habe ich es gemacht ... Ich habe einen Naveblock, der sich unterhalb der Kopfzeile befindet, wenn Sie die Seite nach unten scrollen, bis zum oberen Rand des Fensters An seiner Stelle Ich verwende Position: in CSS für nicht mobile Plattformen und iOS5 behoben . Andere Mobile-Versionen haben diese Verzögerung, bis der Bildschirm nicht mehr scrollen kann, bevor er eingestellt wird.

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

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

http://caniuse.com/css-fixed

0
Anna Smother

Unsere Web-App erfordert 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 zu einem echten Problem geführt. 

Wie bereits erwähnt, ist die beste Lösung, unseren eigenen Scroll-Code 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, nun in seiner Interpretation von "Position: Fest" allein steht. 

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

Was für uns funktioniert hat, ist das Umschalten zwischen "Position: Fest" und "Position: Absolut", abhängig davon, ob der Benutzer gezoomt hat. Dies ersetzt unseren "gleitenden" Header mit vorhersagbarem Verhalten, was 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";
    });
}
0
Heman