Jump to content
  • 0

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


memed
 Share

Question

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

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

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

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

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

Link to comment
Share on other sites

4 answers to this question

Recommended Posts

  • 0

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

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

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

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

Link to comment
Share on other sites

  • 0

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

Оказывается, что если повесить обработчик на ивент 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-ом.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

  • Similar Content

    • By Роман Онищенко
      Разрабатываю React/React Native приложения. С образцами моих некоммерческих работ вы можете ознакомиться по адресу: https://github.com/Roman-Onishchenko?tab=repositories
      Готов рассмотреть ваши предложения о разработке React/React Native приложений различной тематики и объема работ с частичной занятостью (до 30 рабочих часов в неделю). 
      Мои контакты:
      skype - romanonishencko
      email - roman951t@gmail.com
    • By INVOLTA
      Программист PHP  (заработная плата от 20 000 до 90 000 руб.)
      Должностные обязанности: 
      • Разработка веб-проектов любой сложности
      Требования:
      • Опыт разработки высоконагруженных проектов как на чистом PHP, так и на фреймворках;
      • Опыт разработки с использованием ООП;
      • Опыт работы с реляционными и нереляционными базами данных (проектирование, оптимизация, администрирование);
      • Знание математики: мат. логика, теория вероятности, мат. анализ, статистика, мат. статистика;
      • Параллельное программирование;
      • Приветствуется опыт работы с рекламными сетями или общее представление как они работают.
       
      Разработчик JS (заработная плата 25 000 – 150 000 руб.)
      Должностные обязанности:
      • Проектирование систем средствами JavaScript
      Требования:
      • Отличное знание JavaScript (особенно ООП) и особенностей браузеров, опыт работы от 1 года;
      • Отличное владение jQuery; знание других фреймворков и принципов их работы также приветствуется;
      • Умение разделять код JS на модули. Желателен опыт работы с большими проектами.
       
      Программист С/С++  (заработная плата от 25 000 до 150 000 руб.)
      Должностные обязанности:
      • Разработка ПО средствами C/C++
      Основные требования:
      • Хорошее знание С++;
      • Знание основных алгоритмов и структур данных;
      • Понимание принципов ООП, паттерны проектирования;
      • Знание STL/Boost.
      Будет плюсом:
      • Знание Linux и опыт работы с GCC;
      • Навыки работы с системами контроля версий (GIT, SVN);
      • Использование современных стандартов C++11/14, современных практик программирования;
      • Уверенное владение ООП, паттернами проектирования, опыт работы с многопоточностью;
      • Навыки отладки, профилирования и оптимизации кода;
      • Устойчивая привычка проверять свой код, покрывать его юнит-тестами, проводить рефакторинг;
      • Наличие опыта коммерческой разработки на других языках программирования (C#/Java);
      • Опыт разработки высокодоступных сервисов (24/7).
       
      Разработчик мобильных приложений (Xamarin, Java, Swift) (заработная плата от 40 000 до 100 000 руб.)
      Должностные обязанности:
      • Разработка мобильных приложений на Xamarin/Android/iOS;
      • Адаптация технического задания, прототипирование и тестирование приложений;
      • Оптимизация взаимодействия приложений и серверной части.
      Требования:
      • Знание и опыт работы с Xamarin, понимание Xamarin.Forms;
      • Уверенное знание одной из мобильный платформ: iOS, Android;
      • Опыт разработки мобильных приложений на Android, iOS платформе;
      • Опыт работы c реляционными базами данных, такими как SQLite, проектирование баз данных;
      • Необходимые знания: Java, Swift, C#, Android SDK, Google Cloud Platform.

      Уровень заработной платы обсуждается на собеседовании.
      От нас - гибкий график, лучшие зарплаты, комфортные условия, молодой коллектив, новый крутой офис, своя кухня, занятия по стрейчингу, IT- party и многое другое! 
      От Вас - желание развиваться, работать и зарабатывать! 
      ООО "ИНВОЛЬТА" 
      г. Иваново, пр. Строителей, д. 94, оф. 196
      тел. 8(930)356-45-98
      maria@involta.ru
      t.me/involta
      involta.ru
    • By twentyfive_agency
      Мы достаточная слаженная команда и работаем как единый механизм.
      Все члены команды обладают достаточной компетенцией, чтобы выполнять работы разного уровня сложности.
      Сейчас у нас в команде:
      4 Технолога/Верстальщика (html5, css3, javascript, reat, angular) 2 Проектировщика/Дизайнера (invision, photoshop, illustrator, sketch) 3 Бэкенд разработчика (php, nodejs, python + работа со всеми известными cms,crm-системами) 4 Мобильных разработчика (1 iOs, 1 Android) 2 Тестировщика Каждый из членов команды четко понимает ответственность за проект!
      Все задачи ведем в Basecamp, Trello и JIRA, и всегда добавляем туда заказчика, чтобы формировалась прозрачность работы.
      Процесс работы по проектам у нас такой:
      Получаем задание Оцениваем сроки и стоимость, предоставляем информацию в электронном виде заказчику. Согласуем эти данные или вносим корректировки. Подписываем договор (с нашей стороны ИП) Получаем аванс по договору Начинаем работу по проекту Ведем разработку проекта Показываем финальную итерацию заказчику и запускаем проект в продакшн. Остаемся довольными сотрудничеством и получаем отзывы по работе, слаженности и о качестве проекта в целом. Рейты работы наших специалистов:
      Проектирование/Дизайн // 700-800 руб/час Верстка/js  // 700-800 руб/час Программирование (бэкенд) // 700-1000 руб/час Тестирование // 400-650 руб/час Разработка приложений (iOS, Android) // 1000-1400 руб/час Мы работаем над тем, чтобы:
      Заказчик всегда был уверен в том, что сроки по проекту не выйдут за согласованные. Заказчик был уверен в том, что качество работ будет проведено на высшем уровне. Заказчик похвалил нас и сказал, что вернется еще или останется с нами на техподдержку. Наши работы:
      http://greenjam.ru http://tuborg.ru http://k1664.ru http://corny.ru http://megalabs.ru http://prostude.net http://ecorse.education http://eqeducation.org http://dadacreative.com http://tfg.ru/ http://pirelli.autonews.ru/ http://id-direct.ru http://localway.ru  
       
      Twenty Five Agency
      twentyfive.agency
      Georgy Pantsulaya, CEO
      via phone: +7-989-536-00-35
      via skype: hello@twentyfive.agency
    • By Arinden
      Всем здравствуйте! Столкнулся с проблемой и никак не могу найти рабочее решение. Помогите неучу, пожалуйста! Вот ссылка на JSFiddle и пример кода:
      HTML:
      <div class="lineHeight">   HELLO // line-height method </div> <div class="padding">   HELLO // padding method </div> CSS:
      @import url('https://fonts.googleapis.com/css?family=Open+Sans'); div {   font-family: 'Open Sans', sans-serif;   font-size: 14px;   height: 100px;   background: lightgreen;   margin: 5px;   padding-left: 10px;   box-sizing: border-box; } .lineHeight {   line-height: 100px; } .padding {   padding-top: 42px; /* (100px - 14px) / 2 - 1px */ } Ситуация следующая:

      В случаях с line-height и padding текст ровно по центру, отступы по 45px сверху и снизу:



      - Google Chrome (v. 55.0.2883.87 m);
      - Mozilla Firefox (v. 50.1.0);
      - Opera (v. 42.0.2393.94);
      - Safari (macOS, v. 10.0 12602.1.32.7);

      Для line-height отступы по 45px, для padding 46px сверху и 44px снизу:



      - Safari (Windows, v. 5.1.7 7534.57.2);

      В случаях с line-height и padding текст ровно по центру, отступы 46px сверху и 44px снизу:



      - Internet Explorer 11 (v. 11.576.14393.0);
      - Microsoft EDGE (v. 38.14393.0.0);
      Я понимаю, что в ряде случаев это не принципиально, но что делать если блок с текстом это, например, меню, а сбоку от текста расположена ровная иконка, положение которой задано через background-position. Выравниваешь иконку для одного браузера - плывёт в другом. Выглядит весьма заметно и некрасиво. И Бог бы с этим эксплорером, но дело вот в чём, на Android 6.0.1 (device pixel ratio 4.0) стандартный интернет браузер, а также скаченный Google Chrome центруют неровно, также наблюдается расхождение в 1 пиксель, а вот на это уже закрывать глаза не хочется (большой скрин с Android):

      Что примичательно, высота первой буквы на настольных компьютерах 10px, а на андроиде чуть больше.
      Разумеется добиться идеальной картинки, да ещё и во всех браузерах одновременно, невозможно, но ведь это не какой-то частный случай, а вполне закономерное желание разместить текст по центру меню-бара. Я буду очень признателен за Вашу помощь и пояснения на предмет "best-practices".
      Что я пробовал для решения данной проблемы:
      - Использовал разные шрифты, а также разные методы подключения внешних шрифтов: link через html / @import в CSS для Google Fonts, а также @font-face url для скаченных шрифтов;
      - Задавал размеры шрифта, отступы, line-height в em / rem / px;
      - Пробовал различные комбинации line-height + padding;
      - Для создания иконок меню пробовал псевдо элементы, это конечно же решает проблему расположения иконок относительно текста, но не решает проблему центровки по вертикали.

      P.S. CSS сброшен. Meta viewport задан.

      Доп. вопрос от новичка: Почему, задавая размер шрифта 14px, заглавная буква по факту занимает 10px? При этом если я использую буквы типа "Й" и "р", высота занимаемая текстом будет уже 16px, но никак не 14px. Что-же задают тогда эти пиксели в размере шрифта?
    • By dandirector
      Вот страница, которая не отображается https://dandirector.github.io/thermasteel/ проблема обнаружена на android 4.2.2 в uc brouser, хотел бы отметить, что вместо верстки видно просто белый экран. В других браузерах все гуд.
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy