Bagaimana untuk Menambah dan Mengalih Keluar Kelas jQuery Dengan Betul Berdasarkan Tatal Menegak?

Tambah dan Alih Keluar Kelas jQuery Berdasarkan Tatal Menegak

Dalam senario ini, pengguna ingin mengalih keluar kelas "clearHeader" daripada " header" dan gantikannya dengan kelas "darkHeader" semasa pengguna menatal ke bawah, mengubah suai penampilannya. Walau bagaimanapun, kod yang disediakan tidak berfungsi dengan betul.

Mari kita analisa kod asal:

$(window).scroll(function() {    
    var scroll = $(window).scrollTop();    
    if (scroll <= 500) {
        $(".clearheader").removeClass("clearHeader").addClass("darkHeader");
    }
}

Selain daripada beberapa pelarasan kecil, terdapat dua isu penting:

• Operator Salah: Operator perbandingan hendaklah ">=" dan bukannya "<=" kepada mengenal pasti masa untuk menukar kelas dengan betul.
• Ralat Pemilih: Pemilih ".clearheader" tidak betul kerana ia mengandungi huruf kecil "H." Pemilih yang betul hendaklah ".clearHeader."

Berikut ialah kod yang disemak untuk menangani ralat ini:

$(window).scroll(function() {    
    var scroll = $(window).scrollTop();
    if (scroll >= 500) {
        $(".clearHeader").removeClass("clearHeader").addClass("darkHeader");
    }
});

Selain itu, adalah disyorkan untuk tidak mengalih keluar kelas "clearHeader" kerana ia adalah bertanggungjawab untuk menetapkan tajuk. Sebaliknya, gunakan kelas CSS baharu untuk mengubah suai penggayaan.

Selain itu, jika anda berhasrat untuk memulihkan kelas "clearHeader" semasa pengguna menatal ke atas, laksanakan kod ini:

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

Untuk meningkatkan prestasi dan mengelakkan pertanyaan berulang kali pada DOM, pertimbangkan untuk menyimpan pemilih pengepala:

$(function() {
    var header = $(".clearHeader");
    $(window).scroll(function() {
        var scroll = $(window).scrollTop();
        if (scroll >= 500) {
            header.removeClass('clearHeader').addClass("darkHeader");
        } else {
            header.removeClass("darkHeader").addClass('clearHeader');
        }
    });
});

Atas ialah kandungan terperinci Bagaimana untuk Menambah dan Mengalih Keluar Kelas jQuery Dengan Betul Berdasarkan Tatal Menegak?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!