Исправлено позиционирование в Mobile Safari

Question

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

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

Answer 1

iOS 5 имеет поддержку позиции: исправлено.

Answer 2

Эта фиксированная позиция div может быть достигнута всего за 2 строки кода, которые перемещают div при прокрутке вниз страницы.

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

Answer 3

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

Answer 4

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

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

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

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

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

Answer 5

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

Прочтите пункт "4. Измените код, основанный на фиксированном позиционировании CSS", и вы поймете, что есть очень веская причина, почему Apple приняла сознательное решение обрабатывать фиксированное положение как статическое.

Answer 6

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

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

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

Answer 7

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

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

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

Answer 8

Вот как я это сделал. У меня есть блок навигации, который находится ниже заголовка, когда вы прокручиваете страницу вниз, она "прилипает" к верхней части окна. Если вы прокрутите страницу вверх, навигация вернется на свое место. Я использую положение: исправлено в 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' });
            }
        };

Answer 9

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

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

Answer 10

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

http://caniuse.com/css-fixed

Answer 11

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

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

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

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

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