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

Question

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

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

Answer 1

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

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

Answer 2

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

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/#technotes/tn2010/tn2262/

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

Answer 6

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

Лучшее решение, которое я видел, это доктайпер .

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

Answer 7

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

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

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

Answer 8

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

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

Наше веб-приложение требует фиксированного заголовка. Нам повезло, что мы должны поддерживать только самые последние браузеры, но поведение 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";
    });
}