должность: исправлено не работает на iPad и iPhone

многие мобильные браузеры намеренно не поддерживают position:fixed; на том основании, что фиксированные элементы могут мешать на маленьком экране.

Quirksmode.org сайт имеет очень хороший пост в блоге, который объясняет проблему:http://www.quirksmode.org/blog/archives/2010/12/the_fifth_posit.html

Также см. эту страницу для диаграммы совместимости, показывающей, какие мобильные браузеры поддерживают position:fixed;: http://www.quirksmode.org/m/css.html

(но обратите внимание, что мир мобильных браузеров движется очень быстро, поэтому такие таблицы не могут долго оставаться актуальными!)

обновление: сообщается, что iOS 5 и Android 4 имеют позицию:теперь исправлена поддержка.

я сам тестировал iOS 5 в магазине Apple сегодня и могу подтвердить, что он работает с фиксированной позицией. Есть проблемы с масштабированием и панорамированием вокруг фиксированного элемента хотя.

Я нашел эту таблицу совместимости гораздо более актуальной и полезной, чем quirksmode: http://caniuse.com/#search=fixed

Он имеет актуальную информацию о Android, Opera (mini и mobile) и iOS.

фиксированное позиционирование не работает на iOS, как на компьютерах.

представьте, что у вас есть лист бумаги (веб-страница) под увеличительным стеклом(видовое окно), если вы переместите увеличительное стекло и ваш глаз, вы увидите другую часть страницы. Вот как работает iOS.

теперь есть лист прозрачного пластика со словом на нем, этот лист пластика остается неподвижным независимо от того, что (положение:фиксированные элементы). Поэтому, когда вы перемещаете увеличительное стекло, фиксированное элемент появляется перейти.

кроме того, вместо перемещения увеличительного стекла вы перемещаете бумагу (веб-страницу), сохраняя лист пластика и увеличительное стекло неподвижными. В этом случае слово на листе пластика будет казаться неподвижным, а остальная часть контента будет казаться перемещенной (потому что это на самом деле) это традиционный настольный браузер.

Итак, в iOS видовой экран перемещается, в традиционном браузере перемещается веб-страница. В обоих случаях фиксированные элементы остаются неподвижными в реальности; хотя на iOS фиксированные элементы, похоже, перемещаются.

---

способ обойти это, чтобы следовать последние несколько абзацев в в этой статье

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

---

"положение: исправлено" теперь работает так, как вы ожидали бы в на iOS5.

положение: исправлено работает на android / iphone для вертикальной прокрутки. Но вы должны убедиться, что ваши мета-теги полностью. е.г

<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">

кроме того, если вы планируете иметь ту же страницу работать на android pre 4.0, вам также нужно установить верхнюю позицию, или по какой-то причине будет добавлен небольшой запас.

теперь apple поддерживает это

overflow:hidden;
-webkit-overflow-scrolling:touch;

исправлен нижний колонтитул (здесь с jQuery):

if (navigator.platform == 'iPad' || navigator.platform == 'iPhone' || navigator.platform == 'iPod' || navigator.platform == 'Linux armv6l') 
{
    window.ontouchstart = function () 
    {
        $("#fixedDiv").css("display", "none");
    }

    window.onscroll = function() 
    { 
        var iPadPosition = window.innerHeight + window.pageYOffset-45; // 45 is the height of the Footer
         $("#fixedDiv").css("position", "absolute");
         $("#fixedDiv").css("top", iPadPosition);
         $("#fixedDiv").css("display", "block");
    }
}

// in the CSS file should stand:
#fixedDiv {position: fixed; bottom: 0; height: 45px;  whatever else}

надеюсь, что это помогает.

Избегайте на том же поле с помощью преобразования:--- и положение:исправлено. Элемент останется в положении: статический, если есть какое-либо преобразование.

У меня была эта проблема на Safari (iOS 10.3.3) - браузер не перерисовывался, пока не сработало событие touchend. Фиксированные элементы не появлялись или были отрезаны.

трюк для меня был добавление transform: translate3d(0,0,0); к моему элементу фиксированной позиции.

.fixed-position-on-mobile {
  position: fixed;
  transform: translate3d(0,0,0);
}

EDIT - теперь я понимаю, почему преобразование устраняет проблему: аппаратное ускорение. Добавление 3D-преобразования запускает ускорение GPU, обеспечивающее плавный переход. Для получения дополнительной информации проверка аппаратного ускорения эта статья: http://blog.teamtreehouse.com/increase-your-sites-performance-with-hardware-accelerated-css.

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

CSS

<style type="text/css">
    .btn_cardDetailsPg {height:5px !important;margin-top:-20px;}
    html, body {overflow-x:hidden;overflow-y:auto;}
    #lockDiv {
  background-color: #fff;
  color: #000;
  float:left;
  -moz-box-shadow: 0px 4px 2px 2px #ccc;-webkit-box-shadow: 0px 4px 2px 2px #ccc;box-shadow:0px 4px 2px 2px #ccc;
  }
#lockDiv.stick {
  position: fixed;
  top: 0;
  z-index: 10000;
  margin-left:0px;
  }
</style>

HTML

<div id="lockSticky"></div>
<div id="lockDiv">fooo</div>

jQUERY

<script type="text/javascript">
    function sticky_relocate() {
        var window_top = $(window).scrollTop();
        var div_top = $('#lockSticky').offset().top;
        if (window_top > div_top)
            $('#lockDiv').addClass('stick')
        else
            $('#lockDiv').removeClass('stick');
    }
    $(function() {
        $(window).scroll(sticky_relocate);
        sticky_relocate();
    });
</script>

наконец, мы хотим определить, если ipod touch в альбомном или портретном режиме для отображения соответственно

<script type="text/javascript">
    if (navigator.userAgent.match(/like Mac OS X/i)) {
        window.onscroll = function() {

        if (window.innerWidth > window.innerHeight) {
            //alert("landscape [ ]");
            document.getElementById('lockDiv').style.top =
            (window.pageYOffset + window.innerHeight - 268) + 'px';
        }

        if (window.innerHeight > window.innerWidth) {
            //alert("portrait ||");
            document.getElementById('lockDiv').style.top =
            (window.pageYOffset + window.innerHeight - 418) + 'px';
        }
        };
    }
</script>

даже если атрибут CSS {position:fixed;} Кажется (в основном) работает на новых устройствах iOS, можно иметь устройство причуда и запасной вариант для {position:relative;} при случае и без причины или причины. Обычно очистка кэша поможет, пока что-то не произойдет, и причуда не повторится.

в частности, от самого Apple подготовка веб-контента для iPad:

Safari на iPad и Safari на iPhone не имеют изменяемых размеров окон. В Safari на iPhone и iPad, размер окна устанавливается на размер экран (минус элементы управления пользовательского интерфейса Safari), и не может быть изменен со стороны пользователя. Для перемещения по веб-странице, пользователь изменяет масштаб и положение области просмотра, как они дважды нажмите или ущипнуть, чтобы увеличить или или, нажав и перетащив прокрутке страницы. Как пользователь меняется на масштаб и позицию области просмотра они делают это в видимая область содержимого фиксированного размера (то есть окно). Этот средства это элементы веб-страницы, которые имеют свою позицию "фиксированной" на видовом экране может оказаться за пределами видимой области контента, за пределами экрана.

что иронично, Android-устройства, похоже, не имеют этой проблемы. Также вполне можно использовать {position:absolute;} когда в отношении тега тела и не имеют никаких проблем.

Я нашел основную причину этой причуды; что это событие прокрутки не играет хорошо при использовании в сочетании с тегом HTML или BODY. Иногда не нравится запускать событие, или вам придется ждать, пока событие scroll swing не будет завершено, чтобы получить событие. В частности, видовой экран перерисовывается в конце этого события, и фиксированные элементы могут быть перемещены в другое место в видовом экране.

вот что я делаю: (избегайте использования видового экрана и придерживайтесь DOM!)

<html>
  <style>
    .fixed{
      position:fixed;
      /*you can set your other static attributes here too*/
      /*like height and width, margin, etc.*/
      }
    .scrollableDiv{
      position:relative;
      overflow-y:scroll;
      /*all children will scroll within this like the body normally would.*/
      } 
    .viewportSizedBody{
      position:relative;
      overflow:hidden;
      /*this will prevent the body page itself from scrolling.*/
      } 
  </style>
  <body class="viewportSizedBody">
    <div id="myFixedContainer" class="fixed">
       This part is fixed.
    </div>
    <div id="myScrollableBody" class="scrollableDiv">
       This part is scrollable.
    </div>
  </body>
  <script type="text/javascript" src="{your path to jquery}/jquery-1.7.2.min.js"></script>
  <script>
    var theViewportHeight=$(window).height();
    $('.viewportSizedBody').css('height',theViewportHeight);
    $('#myScrollableBody').css('height',theViewportHeight);
  </script>
</html>

по сути это приведет к тому, что тело будет размером с видовой экран и не прокручивается. Прокручиваемый DIV вложенный внутри будет прокручиваться так, как обычно прокручивается тело (минус эффект качания, поэтому прокрутка останавливается на touchend.) Фиксированный DIV остается фиксированным без помех.

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

если все остальное терпит неудачу, приведенный выше код также будет работать с обоими фиксированные и прокручиваемые дивы установлены в {position:absolute;}.

в моем случае, прокрутка показал position: fixed элемент, который изначально не отображается при добавлении в DOM. Поэтому я просто вручную вызвал событие прокрутки, которое, в свою очередь, вызвало перерисовку и вуаля.

window.scrollTo(window.scrollX, window.scrollY);

пожалуйста, попробуйте это, источник здесь

    .your_class {
        transform: translate3d(0,0,0);
        .....
        .....
    }

вот мое решение для этого...

CSS

#bgimg_top {
    background: url(images/bg.jpg) no-repeat 50% 0%; 
    position: fixed; 
    top:0; 
    left: 0; 
    right:0 ; 
    bottom:0;
}

HTML

<body>
<div id="bgimg_top"></div>
....
</body>

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

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