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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

http://caniuse.com/css-fixed

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