фиксированное положение div зависает на странице (iPad)

Для моих нужд мне было проще использовать абсолютный позиционированный заголовок, скрывать его перед прокруткой и показывать при завершении прокрутки (мне нужен тот же код для поддержки iOS4 и Android).

Для моих целей я скрываю заголовок на событии touchstart и показываю его снова на событии touchend или scroll (плюс некоторые таймеры для улучшения отзывчивости/уменьшения мерцания). Он вспыхивает, но это лучший компромисс, который я мог найти. Можно обнаружить начало прокрутки с помощью события touchmove (это делает jQuery), но я найденный touchmove не сработал так же хорошо для меня, потому что:

1. Регулярно iPad не может сделать перерисовку перед прокруткой (т. е. абсолютный заголовок остается застрявшим - даже если top был изменен перед началом прокрутки).

2. Когда элемент ввода получает фокус, iPad автоматически центрирует элемент, но событие scrollstart не срабатывает (потому что нет touchmove, если просто clicking вход).

Реализация фиксированного заголовка на iOS5 может быть улучшено за счет использования гибридного подхода фиксированного и абсолютного позиционирования:

• Используется фиксированное позиционирование для iOS5, пока вход не получит фокус.

• Когда входной сигнал получает фокус (показ клавиатуры), измените на абсолютный код позиционирования iOS4.

• Когда клавиатура закрыта, вернитесь к фиксированному положению.

Код для определения того, когда клавиатура закрыта (например, с помощью клавиши скрытия клавиатуры), должен зарегистрировать событие DOMFocusOut на document элемент и сделать что-то вроде следующего кода. Тайм-аут необходим, потому что событие DOMFocusOut может сработать между тем, когда один элемент получает фокус, а другой теряет его.

function document_DOMFocusOut() {
    clearTimeout(touchBlurTimer);
    touchBlurTimer = setTimeout(function() {
        if (document.activeElement == document.body) {
            handleKeyboardHide();
        }
    }.bind(this), 400);
}

Мой фиксированный код заголовка выглядит примерно так:

{
    setup: function() {
        observe(window, 'scroll', this, 'onWinScroll');
        observe(document, 'touchstart', this, 'onTouchStart');
        observe(document, 'touchend', this, 'onTouchEnd');
        if (isMobile) {
            observe(document, 'DOMFocusOut', this, 'docBlurTouch');
        } else if (isIE) {
        // see http://ajaxian.com/archives/fixing-loss-of-focus-on-ie for code to go into this.docBlurIe()
            observe(document, 'focusout', this, 'docBlurIe');
        } else {
            observe(isFirefox ? document : window, 'blur', this, 'docBlur');
        }
    },

    onWinScroll: function() {
        clearTimeout(this.scrollTimer);
        this.scrolling = false;
        this.rehomeAll();
    },

    rehomeAll: function() {
        if ((isIOS5 && this.scrolling) || isIOS4 || isAndroid) {
            this.useAbsolutePositioning();
        } else {
            this.useFixedPositioning();
        }
    },

    // Important side effect that this event registered on document on iOs. Without it event.touches.length is incorrect for any elements in the document using the touchstart event!!!
    onTouchStart: function(event) {
        clearTimeout(this.scrollTimer);
        if (!this.scrolling && event.touches.length == 1) {
            this.scrolling = true;
            this.touchStartTime = inputOrOtherKeyboardShowingElement(event.target) ? 0 : (new Date).getTime();
            // Needs to be in touchStart so happens before iPad automatic scrolling to input, also not reliable using touchMove (although jQuery touch uses touchMove to unreliably detect scrolling).
            this.rehomeAll();
        }
    },

    onTouchEnd: function(event) {
        clearTimeout(this.scrollTimer);
        if (this.scrolling && !event.touches.length) {
            var touchedDuration = (new Date).getTime() - this.touchStartTime;
            // Need delay so iPad can scroll to the input before we reshow the header.
            var showQuick = this.touchStartTime && touchedDuration < 400;
            this.scrollTimer = setTimeout(function() {
                if (this.scrolling) {
                    this.scrolling = false;
                    this.rehomeAll();
                }
            }.bind(this), showQuick ? 0 : 400);
        }
    },

    // ... more code
}

JQuery mobile поддерживает события scrollstart и scrollstop:

var supportTouch = $.support.touch,
    scrollEvent = "touchmove scroll",
    touchStartEvent = supportTouch ? "touchstart" : "mousedown",
    touchStopEvent = supportTouch ? "touchend" : "mouseup",
    touchMoveEvent = supportTouch ? "touchmove" : "mousemove";

function triggerCustomEvent( obj, eventType, event ) {
    var originalType = event.type;
    event.type = eventType;
    $.event.handle.call( obj, event );
    event.type = originalType;
}

// also handles scrollstop
$.event.special.scrollstart = {

    enabled: true,

    setup: function() {

        var thisObject = this,
            $this = $( thisObject ),
            scrolling,
            timer;

        function trigger( event, state ) {
            scrolling = state;
            triggerCustomEvent( thisObject, scrolling ? "scrollstart" : "scrollstop", event );
        }

        // iPhone triggers scroll after a small delay; use touchmove instead
        $this.bind( scrollEvent, function( event ) {

            if ( !$.event.special.scrollstart.enabled ) {
                return;
            }

            if ( !scrolling ) {
                trigger( event, true );
            }

            clearTimeout( timer );
            timer = setTimeout(function() {
                trigger( event, false );
            }, 50 );
        });
    }
};