Stałe pozycjonowanie w mobilnym Safari

Ta stała pozycja div może być osiągnięta w zaledwie 2 liniach kodu, który przesuwa div na przewijanie do dołu strony.

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

Zobacz rozwiązanie tego problemu przez Google . Zasadniczo musisz przewijać zawartość samodzielnie za pomocą JavaScript. Sencha Touch zapewnia również bibliotekę do uzyskiwania tego zachowania w bardzo wydajnym dworku.

U mnie zadziałało:

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

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

(44 to wysokość mojego baru)

Chociaż Pasek porusza się tylko na końcu przewijania...

To może Cię zainteresować. To strona pomocy deweloperów Apple.
http://developer.apple.com/library/ios/#technotes/tn2010/tn2262/

Przeczytaj Punkt " 4. Zmodyfikuj kod bazujący na CSS fixed positioning " a przekonasz się, że istnieje bardzo dobry powód, dla którego Apple podjęło świadomą decyzję o obsłudze stałej pozycji jako statycznej.

Myślę, że gmail po prostu śledzi pozycję przewijania na timerze i odpowiednio zmienia pozycję div.

Najlepsze rozwiązanie jakie widziałem jest w doctyper .

Prostsze rozwiązanie jQuery, które przesuwa element onscroll: link

Możesz spróbować użyć touch-scroll, wtyczki jQuery, która naśladuje przewijanie ze stałymi elementami w mobilnym Safari: https://github.com/neave/touch-scroll

Zobacz przykład z urządzenia iOS w http://neave.github.com/touch-scroll/

Lub alternatywą jest iScroll: http://cubiq.org/iscroll

Tak to zrobiłem. Mam blok nawigacyjny, który znajduje się pod nagłówkiem po przewinięciu strony w dół, "przykleja się" do górnej części okna. Jeśli przewiń do góry, nav powróci na swoje miejsce Używam position: fixed w CSS dla platform non mobile i iOS5. Inne wersje mobilne mają to "opóźnienie", dopóki ekran nie przestanie przewijać, zanim zostanie ustawiony.

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

Również upewnienie się, że height=device-height nie jest obecny w tym meta tagu pomaga zapobiec dodatkowemu wypełnieniu stopki, które normalnie nie istniałoby na stronie. Wysokość paska menu dodaje się do wysokości paska widoku, powodując przewijanie stałego tła.

Tutaj możesz zobaczyć jakie (mobilne) przeglądarki obsługują pozycję css fixed + tam Wersja.

Http://caniuse.com/css-fixed

Nasza aplikacja internetowa wymaga stałego nagłówka. Mamy szczęście, że musimy tylko obsługiwać najnowsze przeglądarki, ale zachowanie Safari w tym obszarze sprawiło nam prawdziwy problem.

Najlepszą poprawką, jak zauważyli inni, jest napisanie własnego kodu przewijania. Jednak nie możemy uzasadnić tego wysiłku, aby rozwiązać problem, który występuje tylko na iOS. Bardziej sensowne jest mieć nadzieję, że Apple może rozwiązać ten problem, tym bardziej, że, jak sugeruje QuirksMode, Apple stoi teraz sam w ich interpretacji "pozycja: stała".

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

Zadziałało dla nas przełączanie między "position:fixed" i "position:absolute" w zależności od tego, czy użytkownik powiększył. Zastępuje to nasz" pływający " nagłówek przewidywalnym zachowaniem, co jest ważne dla użyteczności. Po powiększeniu zachowanie nie jest tym, czego chcemy, ale użytkownik może łatwo obejść to, odwracając powiększenie.

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