Некоторое время я боролся с фиксированным позиционированием в iPad. Я знаю iScroll, и это не всегда работает (даже в их демонстрации). Я также знаю, что у Сенчи есть исправление для этого, но я не смог Ctrl + F исходный код для этого исправления.
Я надеюсь, что у кого-то может быть решение. Проблема заключается в том, что элементы с фиксированным расположением не обновляются, когда пользователь перемещается вверх или вниз на мобильном браузере Safari с операционной системой iOS.
В итоге я использовал новый jQuery Mobile v1.1: http://jquerymobile.com/blog/2012/04/13/announcing-jquery-mobile-1-1-0/
Теперь у нас есть твердая перезапись, которая предоставляет истинные фиксированные панели инструментов на множество популярных платформ и безопасно возвращается к статической панели инструментов позиционирование в других браузерах.
Самая крутая часть этого подхода заключается в том, что, в отличие от JS-based решения, которые налагают неестественную физику прокрутки во всех платформы, наша прокрутка кажется 100% родной, потому что она есть. Это означает эта прокрутка ощущается везде и работает с прикосновением, колесиком мыши и пользовательский ввод клавиатуры. В качестве бонуса наше решение на основе CSS супер легкий и не влияет на совместимость или доступность.
Многие мобильные браузеры намеренно не поддерживают 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 (мини и мобильном телефоне) и iOS.
Фиксированное позиционирование не работает на iOS, как на компьютерах.
Представьте, что у вас есть лист бумаги (веб-страница) под увеличительным стеклом (видовое окно), если вы перемещаете увеличительное стекло и ваш глаз, вы видите другую часть страницы. Вот как работает iOS.
Теперь есть лист прозрачного пластика со словом на нем, этот лист пластика остается неподвижным независимо от того, что (позиция: неподвижные элементы). Поэтому, когда вы перемещаете увеличительное стекло, неподвижный элемент появляется для перемещения.
В качестве альтернативы вместо перемещения увеличительного стекла вы перемещаете бумагу (веб-страницу), сохраняя лист пластика и увеличительное стекло. В этом случае слово на листе пластика будет оставаться фиксированным, а остальная часть содержимого будет перемещаться (потому что это на самом деле). Это традиционный настольный браузер.
Итак, в iOS перемещается область просмотра, в традиционном браузере веб-страница перемещается. В обоих случаях фиксированные элементы остаются на самом деле; хотя на iOS фиксированные элементы перемещаются.
Чтобы обойти это, нужно следовать последним параграфам в этой статье
(в основном отключить прокрутку в целом, иметь содержимое в отдельном прокручиваемом div (см. синий квадрат в верхней части связанной статьи), а фиксированный элемент помещен абсолютно)
"position: fixed" теперь работает так, как вы ожидали бы в 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);
}
РЕДАКТИРОВАТЬ - теперь я знаю, почему преобразование решает проблему: аппаратное ускорение. Добавление 3D-преобразования запускает ускорение графического процессора для плавного перехода. Подробнее о проверке аппаратного ускорения читайте в этой статье: http://blog.teamtreehouse.com/increase-your-sites-performance-with-hardware-accelerated-css.
Избегайте использования одного и того же блока с помощью transform: --- и position: fixed. Элемент останется в положении: статический, если есть какое-либо преобразование.
используя 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>
ЗОНА
<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 в ландшафтном или портретном режиме соответственно.
<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. Иногда ему не нравится запускать событие, или вам придется подождать, пока событие свинг-свитка не завершится, чтобы принять событие. В частности, окно просмотра перерисовывается в конце этого события, и фиксированные элементы могут быть перемещены в другое место в окне просмотра.
Так вот что я делаю: (избегайте использования видового экрана и придерживайтесь 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>
В сущности это приведет к тому, что BODY будет размером с окном просмотра и не прокручивается. Прокручиваемый DIV, вложенный внутри, будет прокручиваться, как обычно, BODY (минус эффект качания, поэтому прокрутка останавливается на касании). Фиксированный DIV остается неподвижным без помех.
В качестве побочного примечания, высокое значение z-index на фиксированном DIV важно, чтобы сохранить прокручиваемую DIV за ней. Я обычно добавляю в изменение размера окна и прокручиваю события также для кросс-браузерной и альтернативной совместимости с разрешением экрана.
Если все остальное не работает, приведенный выше код также будет работать как с фиксированными, так и с прокручиваемыми DIV, установленными на {position:absolute;}.
Простой способ решить эту проблему - просто ввести свойство transform для вашего элемента. и это будет исправлено. Удачного кодирования :-)
.classname{
position: fixed;
transform: translate3d(0,0,0);
}
Кроме того, вы можете попробовать его путь, это тоже хорошо работает.
.classname{
position: -webkit-sticky;
}
В моем случае прокрутка показала элемент position: fixed, который изначально не показывался при добавлении в DOM. Поэтому я просто вручную вызвал событие прокрутки, которое, в свою очередь, вызвало перерисовку и вуаля.
window.scrollTo(window.scrollX, window.scrollY);
вот мое решение этого...
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), используя (слева, справа, сверху, снизу).
Пожалуйста, убедитесь, что вы не используете ширину и высоту, так как это переопределит верхние, левые, правые, нижние параметры.