Bagaimana untuk Membetulkan Elemen Navigasi Tetap dalam Safari Mudah Alih Apabila Papan Kekunci Muncul?

Membetulkan Elemen Navigasi Tetap dalam Safari Mudah Alih

Memastikan elemen navigasi tetap kekal pada tempatnya apabila papan kekunci maya dibuka dalam Mobile Safari boleh menjadi mencabar. Isu ini berpunca daripada pepijat yang diketahui dalam pengendalian elemen tetap Mobile Safari.

Satu penyelesaian yang dicadangkan oleh dansajin melibatkan menogol kedudukan elemen tetap apabila medan input menerima fokus. Apabila fokus ditetapkan, elemen tetap ditetapkan kepada position:absolute, dan apabila fokus hilang, ia kembali kepada position:fixed.

Untuk melaksanakan pendekatan ini, tambahkan CSS berikut:

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

Selain itu, sertakan JavaScript berikut:

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

Atas ialah kandungan terperinci Bagaimana untuk Membetulkan Elemen Navigasi Tetap dalam Safari Mudah Alih Apabila Papan Kekunci Muncul?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!