Постоянный нижний колонтитул мобильного браузера (не jquery)

Question

Я ищу не-jquery решение для добавления постоянного наложения нижнего колонтитула на мой мобильный сайт. Это похоже на всплывающее объявление, которое размещается поверх содержимого, но привязано к нижней части страницы.

Я использовал подход javascript к этому:

window.addEventListener(
    'scroll',
    function() {
        //if scrolled and offsets are the same (iphone)
        if(_self.initOffsetY == window.pageYOffset)
        {
            document.getElementById(_self.id).style.bottom = _self.initWindowHeight - window.innerHeight+"px";
        }
        else
        {
            document.getElementById(_self.id).style.bottom = _self.initWindowHeight - window.innerHeight - window.pageYOffset+"px"; 
        }
    },
    false
);

где initPage Height - начальная высота страницы, а initOffsetY - начальное смещение страницы. Это позаботится о случае с строкой меню браузера.

Но это не очень хорошо работает на Android. Позиционирование выключено. Может кто-нибудь объяснить, почему? Спасибо

Answer 1

Вам, вероятно, следует использовать один из этих автономных помощников прокрутки: http://joehewitt.github.com/scrollability/ или http://cubiq.org/iscroll

Answer 2

Если вы привязаны к этому подходу перемещения элемента туда, где вы хотите его / приблизительное положение: исправлено, вам нужно будет проверить несколько вещей, один из которых - HTML-код, который вы должны сделать.уверен, что нет никаких полей или отступов, мешающих вышеуказанному сценарию.Быстрое решение взлома состоит в том, чтобы просто измерить разницу высот и откалибровать ваш скрипт в соответствии с этим.Число, полученное при калибровке, может быть полезно для определения источника проблемы.Вероятно, есть некоторые дополнительные приемы, чтобы сделать это гладко, но я бы пошел с библиотекой, которая уже используется, и, похоже, их несколько: http://bradfrostweb.com/blog/mobile/fixed-position/

btw - библиотека iscroll4 будетисправить проблему с прокруткой при переполнении: авто на ios <5, android <4 </p>

Answer 3

Не лучше ли иметь два отдельных элемента, основной упаковщик и div нижнего колонтитула, возможно, и включить прокрутку только в оболочке (overflow:auto;)? Это позволит избежать большинства несоответствий браузера или даже случаев, когда JS выключен.

Есть недостаток, хотя. Вам нужно будет запрограммировать метод прокрутки внутренних элементов для некоторых мобильных устройств. Для этого есть библиотеки (задыхаясь!), Но, честно говоря, не так уж и сложно программировать себя (как я сделал с моим сайтом).