Bagaimanakah Saya Boleh Menjadikan Pengaki Saya Responsif kepada Ubah Saiz Tetingkap Menggunakan jQuery atau JavaScript?

jQuery untuk Ubah Saiz Tetingkap

Kod jQuery yang disediakan menyemak ketinggian tetingkap hanya apabila halaman dimuatkan. Untuk membetulkan ini, kita perlu menyemak ketinggian tetingkap pada ubah saiz juga.

Menggunakan jQuery

Penyelesaian yang mudah adalah untuk mengikat acara ubah saiz ke objek tetingkap menggunakan Kaedah on() jQuery:

$(window).on('resize', function() {
    var $containerHeight = $(window).height();
    if ($containerHeight <= 818) {
        $('.footer').css({
            position: 'static',
            bottom: 'auto',
            left: 'auto'
        });
    } else if ($containerHeight > 819) {
        $('.footer').css({
            position: 'absolute',
            bottom: '3px',
            left: '0px'
        });
    }
});

Menggunakan JavaScript dan CSS

Sebagai alternatif, anda boleh menggabungkan JavaScript dan CSS untuk mengendalikan acara ubah saiz:

CSS:

.footer {
    position: static;
    bottom: auto;
    left: auto;
}

@media screen and (min-height: 820px) {
    .footer {
        position: absolute;
        bottom: 3px;
        left: 0px;
    }
}

JavaScript :

window.onresize = function() {
    if (window.innerHeight >= 820) {
        $('.footer').css({
            position: 'absolute',
            bottom: '3px',
            left: '0px'
        });
    } else if (window.innerHeight <= 818) {
        $('.footer').css({
            position: 'static',
            bottom: 'auto',
            left: 'auto'
        });
    }
}

Prestasi Pengoptimuman

Secara lalai, acara ubah saiz akan dicetuskan dengan kerap, yang boleh menjejaskan prestasi. Untuk mengurangkan perkara ini, anda boleh menggunakan fungsi nyahlantun atau pendikit untuk mengehadkan kekerapan pelaksanaan kod.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menjadikan Pengaki Saya Responsif kepada Ubah Saiz Tetingkap Menggunakan jQuery atau JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!