Фиксированное позиционирование в мобильном Safari

можно ли расположить элемент, фиксированный относительно окна просмотра в Mobile Safari? Как многие отметили,position: fixed не работает, но Gmail только что вышел с решением, которое почти то, что я хочу – см. плавающую строку меню в представлении сообщения.

получение событий прокрутки в реальном времени в JavaScript также было бы разумным решением.

66
css iphone javascript mobile-safari

11 ответов

34

это фиксированное положение дел может быть достигнуто в 2 строки кода, который перемещает div в нижней части страницы.

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

посмотреть решение Google для этой проблемы. Вы в основном должны прокручивать контент самостоятельно, используя JavaScript. Сенча Touch также предоставляет библиотеку для получения этого поведения в очень производительном поместье.

10

это сработало для меня:

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

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

(44-высота моего бара)

хотя панель перемещается только в конце прокрутки...

6

Это может вас заинтересовать. Это страница поддержки Apple Dev.
http://developer.apple.com/library/ios/#technotes/tn2010/tn2262/

Читайте пункт"4. Изменить код, который полагается на CSS фиксированного позиционирования

5

Я думаю, что gmail просто отслеживает положение прокрутки на таймере и перемещает div соответственно.

лучшее решение, которое я видел, - это doctyper.

более простое решение jQuery, которое перемещает элемент onscroll:ссылке

4

вы можете попробовать использовать touch-scroll, плагин jQuery, который имитирует прокрутку с фиксированными элементами на мобильном Safari:https://github.com/neave/touch-scroll

просмотр примера с устройством iOS на http://neave.github.com/touch-scroll/

или альтернативой является iScroll:http://cubiq.org/iscroll

3

вот как я это сделал. У меня есть блок навигации, который находится под заголовком, Как только вы прокручиваете страницу вниз, она "прилипает" к верхней части окна. Если вы прокручиваете назад к началу, nav возвращается на свое место Я использую position: исправлено в CSS для не мобильных платформ и iOS5. Другие мобильные версии имеют это "отставание", пока экран не перестанет прокручиваться до его установки.

// 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
<meta name="viewport" content="width=320, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>

и убедившись, что height=device-height нет в этом метатеге помогает предотвратить дополнительное заполнение нижнего колонтитула, которое обычно не существует на странице. Высота меню добавляет к высоте окна просмотра, в результате чего фиксированный фон становится прокручиваемым.

1

здесь вы можете увидеть, какие (мобильные) браузеры поддерживают фиксированную позицию css + там версия.

http://caniuse.com/css-fixed

0

для нашего веб-приложения требуется фиксированный заголовок. Нам повезло, что мы должны поддерживать только последние браузеры, но поведение Safari в этой области вызвало у нас реальную проблему.

лучшее исправление, как указывали другие, - это написать собственный код прокрутки. Однако мы не можем оправдать эти усилия по устранению проблемы, которая возникает только на iOS. Имеет смысл надеяться, что Apple может решить эту проблему, тем более, что, как предполагает QuirksMode, Apple теперь стоит в одиночестве в своих толкование термина "положение: фиксированное".

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

то, что сработало для нас, - это переключение между "position: fixed" и "position:absolute" в зависимости от того, увеличен ли пользователь. Это заменяет наш "плавающий" заголовок предсказуемым поведением, что важно для удобства использования. При увеличении масштаба поведение не то, что мы хотим, но пользователь может легко обойти это, изменив масштаб. 

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