Ist es möglich, ein Element in Mobile Safari relativ zum Ansichtsfenster zu positionieren? Wie viele bemerkt haben, position: fixed
funktioniert 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.
javascript
iphone
css
mobile-safari
Sophie Alpert
quelle
quelle
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'; };
quelle
position:fixed;top:50%;left:50%;
.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.
quelle
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 ...
quelle
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.
quelle
Ich denke, Google Mail verfolgt nur die Bildlaufposition auf einem Timer und positioniert a
div
entsprechend neu.Die beste Lösung, die ich gesehen habe, ist bei doctyper .
Eine einfachere jQuery-Lösung, die ein Element onscroll: link verschiebt
quelle
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
quelle
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' }); } };
quelle
<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
dieses 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.quelle
Hier können Sie sehen, welche (mobilen) Browser die CSS-Position fest + dort Version unterstützen.
http://caniuse.com/css-fixed
quelle
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"; }); }
quelle