Как определить положение: исправлено для нижней панели инструментов на iOS (iPhone / iPad)

Question

У меня есть панель, которая прикреплена к нижней части каждой страницы моего сайта с помощью позиции: исправлено.Проблема в том, что на таких устройствах, как iPhone или iPad, это свойство не соблюдается.

Я пытался использовать javascript для определения высоты экрана, положения прокрутки, и это прекрасно работает на iPad:

$( window ).scroll( function ( ) { $( "#bar" ).css( "top", ( $( window ).height() + $( document ).scrollTop() - 90 ) +"px" );  } );

Как видите, я использую jQuery.Проблема в том, что этот код не совсем работает на iPhone, потому что высота окна не включает в себя строку адреса (а также строку отладки, если она есть), поэтому панель сначала идет в нужном месте, но по мере ее прокруткизафиксировано над правильной позицией (количество пикселей, используемых в адресной строке Mobile Safari).

Есть ли способ получить эту информацию и правильно исправить эту панель инструментов?

Имейте в виду, что это не таксайт, созданный для iPhone, поэтому я не могу использовать такие хитрости, как iScroll.

Answer 1

Начиная с iOS 8.4, вы можете использовать position: sticky; соответственно position: -webkit-sticky;, чтобы исправить это.

Answer 2

Я исправил это на своем сайте и ответил об этом в переполнении стека. С тех пор я получил огромное количество благодарности от людей, которые это реализовали. Извините, у меня нет времени на резюме.

https://stackoverflow.com/a/10030251/1118070

Answer 3

Я только что сделал что-то подобное, привязав навигацию к TOP окна. Навигация начинается ниже заголовка, а затем придерживается, если вы прокрутите его. iOS5 поддерживает фиксированное позиционирование. Элемент будет привязан к позиции ПОСЛЕ конца прокрутки, но все еще работает хорошо '#sticky-anchor' - это оболочка для моей навигации.

Не помню, где я все это нашел, получил маленькие кусочки со многих сайтов. Вы можете настроить его под свои нужды.

$(window).scroll(function(event){

// sticky nav css NON mobile way
   sticky_relocate();

   var st = $(this).scrollTop();

// sticky nav iPhone android mobile way
// iOS 4 and below

   if (navigator.userAgent.match(/OS 5(_\d)+ like Mac OS X/i)) {
        //do nothing uses sticky_relocate above
   } 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 4

Я могу указать вам только в некоторых направлениях:

• исправлено позиционирование-на-мобильный-сафари
• CSS-положение фиксированного решения
• -мобильно-WebKit-CSS фиксированной позиции, проблема
• SO: исправлена ​​странная проблема с webkit-позицией

Answer 5

Попробуйте скрыть / отобразить нижнюю фиксированную навигацию на iPhone на основе window.innerHeight. Когда бы ни отображались панели инструментов, обычно при прокрутке вверх можно отобразить нижнюю навигационную панель и скрыть ее при прокрутке вниз, когда панели инструментов скрываются.

Вы можете использовать код, подобный этому:

    var windowHeight = {
  small: window.innerHeight,
  middle: window.innerHeight,
  big: window.innerHeight
}
window.addEventListener('resize', function(){
  var currentHeight = window.innerHeight;
  if (currentHeight < windowHeight.small) {
    windowHeight.small = currentHeight;
  }

  if (currentHeight > windowHeight.big) {
    windowHeight.big = currentHeight;
  }

  console.log('windowHeight.small', windowHeight.small, 'windowHeight.middle', windowHeight.middle, 'windowHeight.big', windowHeight.big, 'currentHeight', currentHeight);

  if (currentHeight === windowHeight.big) {
    transform(stickyNav, 'translate3d(0,120%,0)');
    console.log('Hide bottom nav on big screen!');
  } else if (currentHeight === windowHeight.middle) {
    transform(stickyNav, 'translate3d(0,0,0)');
    console.log('Show bottom nav on middle screen!');
  } else {
    transform(stickyNav, 'translate3d(0,-100%,0)');
    console.log('Display bottom nav high up on smaller screen!');
  }
})

Функция transform (stickyNav, 'translate3d (x, x, x)') - это простая функция, использующая нижнюю навигационную панель и затем применяющая преобразование, чтобы скрыть / отобразить элемент, расположенный внизу.

Answer 6

Этот бит jquery-кода работал для меня:

if(navigator.platform == 'iPad' || navigator.platform == 'iPhone' || navigator.platform == 'iPod'){
    $("#footer_menu").css("position", "fixed").css("top", $('window').height());
};

В противном случае CSS для #footer_menu был:

position:fixed;
bottom:0;
width:100%;
padding:5px 0;
text-align:center;
height:44px;

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

Answer 7

iScroll probaply - самое простое решение вашей проблемы. Вопреки вашему мнению, это также работает для Android и оперы. Новая версия его работает превосходно.

http://cubiq.org/iscroll-4

Answer 8

Спасибо Google, а не мне:

http://code.google.com/mobile/articles/webapp_fixed_ui.html

Довольно просто, на самом деле.