Никита!

Если вы имеете дело с Андроидом выше второй версии и Айосом выше четвёртой версии, то с этой задачей справится ЦСС-свойство 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, чтобы не было видно, как он перемещается при скролле. Это позволяет избежать мельтешения.