Bagaimanakah Saya Boleh Menggunakan jQuery untuk Menambah dan Mengalih Keluar Kelas CSS Berdasarkan Kedudukan Tatal Menegak?

Tambah/Buang Kelas dengan jQuery Berdasarkan Tatal Menegak

Dalam keadaan ini, matlamatnya adalah untuk mengalih keluar kelas daripada "pengepala" elemen sebaik sahaja pengguna menatal ke bawah jarak tertentu, dan kemudian gunakan kelas yang berbeza untuk mengubah penampilannya. Walau bagaimanapun, kod yang disediakan tidak berfungsi seperti yang dimaksudkan kerana beberapa ralat kecil.

Kod yang diperbetulkan adalah seperti berikut:

$(window).scroll(function() {
    var scroll = $(window).scrollTop();

    // >=, not <=
    if (scroll >= 500) {
        // clearHeader, not clearheader - caps H
        $(".clearHeader").addClass("darkHeader");
    }
});

Terdapat tiga isu utama:

1. Pengendali perbandingan tidak betul; ia sepatutnya >= untuk menyemak sama ada kedudukan tatal lebih besar daripada atau sama dengan 500.
2. Nama kelas untuk dialih keluar telah disalah eja sebagai clearheader dan bukannya clearHeader.
3. The ; telah hilang pada penghujung pengisytiharan fungsi.

Selain membetulkan ralat ini, pertimbangkan perkara berikut:

• Daripada mengalih keluar kelas clearHeader, lebih baik untuk menambah kelas darkHeader kepadanya. Ini mengekalkan kedudukan pengepala sambil mengubah suai penampilannya.
• Untuk menetapkan semula kelas apabila menatal semula ke atas, gunakan syarat kedua seperti yang dilihat di bawah:

if (scroll >= 500) {
    $(".clearHeader").addClass("darkHeader");
} else {
    $(".clearHeader").removeClass("darkHeader");
}

Akhir sekali, caching objek jQuery untuk pengepala boleh meningkatkan prestasi, terutamanya jika anda merancang untuk mengubah suai kelasnya beberapa kali:

var header = $(".clearHeader");
$(window).scroll(function() {
    var scroll = $(window).scrollTop();

    if (scroll >= 500) {
        header.removeClass('clearHeader').addClass("darkHeader");
    } else {
        header.removeClass("darkHeader").addClass('clearHeader');
    }
});

Oleh menangani isu ini, anda kini boleh menambah dan mengalih keluar kelas dengan berkesan daripada pengepala berdasarkan kedudukan tatal menegak pengguna.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menggunakan jQuery untuk Menambah dan Mengalih Keluar Kelas CSS Berdasarkan Kedudukan Tatal Menegak?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!