Фиксированный хедер в мобильной верстке

[memed]

Доброго время суток.

Подскажите, пожалуйста, кто сталкивался со следующей проблемой в верстке под андроид и айфон:

необходимо сделать, чтоб при скролле хедер всегда находился в верхней части экрана. Казалось, что нет ничего проще - достаточно поставить position: fixed; top: 0. Но iOS4 не поддерживает данное свойство. При использовании плагина iScrool 4 возникаю проблемы с галереями, которые хочется листать перетаскиванием пальцев. С Hammer-ом получилось тоже самое. Еще как вариант jQuery Mobile, но тоже есть минусы: при зуме хедер всегда прилеплен к левому краю экрана и увидеть его целиком никак нельзя.

Сейчас я деаю хедер абсолютно позиционированным и пробую скриптом при начале скролла скрыть хедер, а при окончании скролла отследить положение верхней точки экрана, сделать хедер видемым и задать этот отступ. И вроде все гуд, но на андроид 2.3, 4 (sumsung, htc) и айфоне 4 бывают такие моменты, когда при скролле хедер не пропадает, а "прилипает" к пальцу. как только скролл закончен, то все выглядит хорошо. Такой баг замечен на мобильном твиттере. И такая же беда проявляется, если использовать jQuery Mobile (на ихнем сайте можно посмотреть).

Может кто-то подскажет рецепт фиксированого позиционирования? Или лечения проявления скрытых элементов при скролле? последнее еще просматривается после закрытия выпадающих меню

[npofopr]

Может тут что http://habrahabr.ru/post/162841/

[memed]

Я проверила демо из статьи на хабре - баг все равно присутствует.

Чтобы было понятнее о чем я говорю, можно посмотреть

. Там показаны на андроиде 2.3 сайти твиттера, сайт, над которым я работаю, и демо пример со статьи. Видно, что хедер иногда "прилипает" к пальцу при скролле.

Прошу прощение за качество видео, но лучше камеры под рукой не нашлось.

[npofopr]

А в бутстрапе не смотрели?

И если попробовать смотреть не в Хроме?

Edited January 10, 2013 by npofopr

[memed]

У меня получилось следующее решение:

Оказывается, что если повесить обработчик на ивент scroll, то в андроиде выполнение происходит не сразу, а с некоторой задержкой. Для того, чтоб это поправить, я отслеживаю ивент touchstart, который является стандартным для Android и iPhoe, и вешаю на дополнительный обработчик. Но при этом нужно отличить такие ивенты как просто прикосновение (touch) и прикосновение при скролле (scroll). Также, было бы не плохо, чтоб пользователь мог убрать хедер, когда ему это нужно, просто тачнув в любом месте контента (кроме самого хедера). Результатом является следующий код:

var touchT = 0, //тригер touch или scroll
posHdr = 1; // тригер скрыт/виден хедер
document.addEventListener('touchstart', function(event) {
if ( event.target.nodeName == 'A' || $(event.target).closest('.header').length) //список элементов при прикосновении к которым сценарий действий не должен меняться
  return;
touchT = 1; // произошел touch
$('.header').css({top: '0'}); // скрывается хедер
setTimeout(function() { // если через 0,75с не произошел scroll, то выполняется тригер touch
  if (touchT == 1)
   $(document).trigger('touch');
}, 750);
}, false);
$(document).bind('touch', function() {
if( posHdr == '1' ) { // если хедер виден
  $('.header').css({top: '0'}); // скрывается хедер
  posHdr = 0; // хедер скрыт
} else {
  $('.header').css({top: $(window).scrollTop()+'px'}); // новое положение хедера
  posHdr = 1; // хедер виден
}
});
window.onscroll = function() {
touchT = 0; // произошел scroll
if( posHdr == '1' ) { // если хедер виден
  clearTimeout(timered); // останавливается отсчет времени для выпленения функции, повешеной на touch
  $('.ui-header').css({top: '0'}); // скрывается хедер
  var scrlTop = $(window).scrollTop(); //расчет нового положения хедера
  timered = setTimeout(function() {$('.ui-header').css({top: scrlTop + 'px'}); }, 500); //чтоб избежать мигания, хедер появляется чрез пол секунды
}
};

Еще причиной "залипаня" и отображения скрытых элементов при скролле в андроиде 2.3 может быть испоьзование css свойтва translate3d. В моем случае это была галлерея. Пришлось именно для андроида 2.3 заменить это свойство animate-ом.