當鍵盤出現時如何修復 Mobile Safari 中的固定導覽元素？

修正Mobile Safari 中的固定導覽元素

當虛擬鍵盤在Mobile Safari 中開啟時，請確保固定導覽元素保持在原位可能具有挑戰性。此問題源自於 Mobile Safari 處理固定元素的已知錯誤。

dansajin 提出的一種解決方案是在輸入欄位接收焦點時切換固定元素的位置。當設定焦點時，固定元素設定為position:absolute，當焦點遺失時，它們恢復為position:fixed。

要實作此方法，請新增以下CSS：

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

此外，請包含以下 JavaScript：

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');
    });
}

以上是當鍵盤出現時如何修復 Mobile Safari 中的固定導覽元素？的詳細內容。更多資訊請關注PHP中文網其他相關文章！