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

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

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

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

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

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

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

Ответы

Ответ 1

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

Ответ 3

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

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

$(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' });
        }
    };
};

Ответ 4

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

fooobar.com/questions/150749/...

Ответ 5

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

http://cubiq.org/iscroll-4

Ответ 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;

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

Ответ 7

Попробуйте скрыть/отобразить нижнюю фиксированную навигацию на 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)') - это простая функция, использующая нижнюю навигационную панель и затем применяющая преобразование, чтобы скрыть/отобразить элемент, расположенный внизу.