Фиксированное позиционирование в Mobile Safari

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

Доступ к событиям прокрутки в режиме реального времени в JavaScript также будет разумным решением.

ОТВЕТЫ

Ответ 2

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

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

Ответ 3

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

Ответ 4

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

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

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

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

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

Ответ 5

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

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

Ответ 6

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

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

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

Ответ 10

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

Ответ 11

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

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

Ответ 12

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

http://caniuse.com/css-fixed

Ответ 13

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