Wie behebe ich feste Navigationselemente in Mobile Safari, wenn die Tastatur angezeigt wird?

Feste Navigationselemente in Mobile Safari reparieren

Es kann eine Herausforderung sein, sicherzustellen, dass feste Navigationselemente an Ort und Stelle bleiben, wenn die virtuelle Tastatur in Mobile Safari geöffnet wird. Dieses Problem ist auf bekannte Fehler in der Handhabung fester Elemente durch Mobile Safari zurückzuführen.

Eine von dansajin vorgeschlagene Lösung besteht darin, die Position fester Elemente umzuschalten, wenn ein Eingabefeld den Fokus erhält. Wenn der Fokus gesetzt ist, werden die festen Elemente auf position:absolute gesetzt, und wenn der Fokus verloren geht, kehren sie zu position:fixed zurück.

Um diesen Ansatz zu implementieren, fügen Sie das folgende CSS hinzu:

.header { 
    position: fixed; 
} 
.footer { 
    position: fixed; 
} 
.fixfixed .header, 
.fixfixed .footer { 
    position: absolute; 
} 

Fügen Sie außerdem das folgende JavaScript ein:

if ('ontouchstart' in window) {
    /* cache dom references */ 
    var $body = $('body'); 

    /* bind events */
    $(document)
    .on('focus', 'input', function() {
        $body.addClass('fixfixed');
    })
    .on('blur', 'input', function() {
        $body.removeClass('fixfixed');
    });
}

Das obige ist der detaillierte Inhalt vonWie behebe ich feste Navigationselemente in Mobile Safari, wenn die Tastatur angezeigt wird?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!