x
 
Никита Демидов
13 декабря 2012

Артём и Коля, раскажите, пожалуйста, как правильно сверстать таббар на ХТМЛ5 и ЦСС3 фиксированной высоты, прибитый к низу окна, и чтобы всегда оставался на экране, — в общем, как в мобильных приложениях. Собственно, это и нужно для отображения на мобильных устройствах.



Никита!

Если вы имеете дело с Андроидом выше второй версии и Айосом выше четвёртой версии, то с этой задачей справится ЦСС-свойство position: fixed. Позиционирующий стиль для таббара высотой в 50 пикселей будет таким:

.tabbar {
  position: fixed;
  height: 50px;
  right: 0;
  bottom: 0;
  left: 0;
}

Когда тестировал это решение, заметил, что на Айфоне при первом скролле таббар позиционируется абсолютно, а не фиксированно, и поэтому скроллится. При следующем скролле он встаёт правильно. Вылечилось это строчкой Яваскрипта:

window.scrollBy(0);

Реализовать поддержку таббара в ранних версиях Андроида и Айоса без Яваскрипта уже не получится. Для начала применим к блоку абсолютное позиционирование:

.tabbar {
  position: absolute;
  height: 50px;
  right: 0;
  bottom: 0;
  left: 0;
}

Затем сделаем обработчики для событий touchmove и scroll:

window.ontouchmove = function(event) {
  if (event.target.id != 'footer')
  {
    document.getElementById('footer').style.display = 'none';
  }	
}

window.onscroll = function()
{
  var footer = document.getElementById('footer');
  footer.style.top =
    (window.pageYOffset + window.innerHeight - 50) + 'px';
  footer.style.display = 'block';
};

Обратите внимание: я прячу таббар в начале скролла с помощью события touchmove, чтобы не было видно, как он перемещается при скролле. Это позволяет избежать мельтешения.


P. S.
Это был совет о разработке сайтов. Хотите узнать всё об умной вёрстке, правильных скриптах, грациозной деградации, трюках и работе технолога с дизайнером? Присылайте вопросы.

Твитнуть
Поделиться
Поделиться
Отправить

Цель рубрики — обсуждение вопросов дизайна всех видов, текста в дизайне и взаимоотношений дизайнеров с клиентами.

Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры. Мы ожидаем, что такие комментарии составят около 20% от общего числа.

Решение о публикации принимается один раз; мы не имеем возможности комментировать или пересматривать свое решение, хотя оно может быть ошибочно. Уже опубликованные комментарии могут быть удалены через некоторое время, если без них обсуждение не становится менее ценным или интересным.

Вот такой веб 2.0.

обязательны полностью для публикации комментария
Электронная почта
адрес не будет опубликован
Ваши соображения
Иллюстрация
гиф или джипег шириной не более 700 пикселей
Простейший параллакс на ЦСС Какие фавыконки использовать в 2025? Что нового в ЦСС: text-box-trim Как изменить стили чужого сайта? 1




Недавно всплыло

Все уже успели заметить, что вы почти во всех пятничных примерах советуете немного поунижаться 12 Как верстать текстовые блоки? 3 Как правильно заимствовать чужой материал? 1 4