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.

EM или REM? 6 Можно ли достичь эффекта переливания без встраивания видео на сайт? 1




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

1 2 3 1