Rumah > hujung hadapan web > tutorial css > Bagaimanakah Saya Boleh Mengubah Kelas Pengepala Secara Dinamik Berdasarkan Kedudukan Tatal Menegak Menggunakan jQuery?

Bagaimanakah Saya Boleh Mengubah Kelas Pengepala Secara Dinamik Berdasarkan Kedudukan Tatal Menegak Menggunakan jQuery?

Susan Sarandon
Lepaskan: 2024-12-03 19:50:14
asal
522 orang telah melayarinya

How Can I Dynamically Change a Header's Class Based on Vertical Scroll Position Using jQuery?

Manipulasi Kelas berasaskan JQuery dengan Tatal Menegak

Masalah:

Anda bertujuan untuk mengubah suai kelas elemen pengepala semasa pengguna menatal, menukar penampilannya. Walau bagaimanapun, pendekatan semasa anda tidak berfungsi seperti yang diharapkan.

Penyelesaian:


$(window).scroll(function() {

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

// Update using correct operator (>=, not <=)
if (scroll >= 500) {
    // Use correct class name (clearHeader, not clearheader)
    $(".clearHeader").addClass("darkHeader");
}
Salin selepas log masuk

});

Sintaks Betul:

Memastikan penggunaan > = operator dan nama kelas clearHeader adalah penting. Selain itu, jangan alih keluar kelas clearHeader, kerana ia mengalih keluar kedudukan tetap dan keupayaannya untuk dipilih semula.

Menetapkan Semula Kelas:

Untuk menetapkan semula pengubahsuaian kelas apabila menatal ke atas, gunakan ini kod:


$(tetingkap).skrol(fungsi() {

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

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

});

Pengoptimuman Prestasi:

Untuk kecekapan yang lebih baik, cache Objek jQuery 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');
    }
});
Salin selepas log masuk

});

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mengubah Kelas Pengepala Secara Dinamik Berdasarkan Kedudukan Tatal Menegak Menggunakan jQuery?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan