Rumah >hujung hadapan web >tutorial css >Bagaimanakah anda boleh memastikan div kekal tetap selepas menatal kepadanya, walaupun kedudukan awalnya?

Bagaimanakah anda boleh memastikan div kekal tetap selepas menatal kepadanya, walaupun kedudukan awalnya?

Barbara Streisand
Barbara Streisandasal
2024-11-20 01:16:03309semak imbas

How can you ensure a div stays fixed after scrolling to it, despite its initial position?

Membetulkan Div Selepas Menatal ke Div

Masalah: Bagaimanakah anda boleh memastikan bahawa div kekal tetap selepas menatal kepadanya, walaupun kedudukan awalnya pada halaman?

Penyelesaian:

Untuk mencapai matlamat ini, terdapat dua pendekatan utama:

  1. CSS-Sahaja Kaedah:

    • Gunakan kedudukan CSS: sifat tetap selepas menatal ke kedudukan yang diingini.
    • Penyelesaian ini tersedia dalam penyemak imbas moden (lihat https://stackoverflow.com/a/53832799/1482443 untuk butiran).
  2. Kaedah jQuery:

    • Dengar untuk acara tatal menggunakan jQuery.
    • Tentukan kedudukan awal div yang dikehendaki menggunakan kaedah offset().top.
    • Gunakan kedudukan: penggayaan tetap jika kedudukan tatal melebihi kedudukan awal div dan kembali ke kedudukan : statik sebaliknya. Berikut ialah kod jQuery:
var fixmeTop = $('.fixme').offset().top;

$(window).scroll(function() {

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

    if (currentScroll >= fixmeTop) {
        $('.fixme').css({
            position: 'fixed',
            top: '0',
            left: '0'
        });
    } else {
        $('.fixme').css({
            position: 'static'
        });
    }

});

Dengan mana-mana pendekatan, anda boleh membuat div dengan berkesan selepas menatal kepadanya. Ingat untuk mempertimbangkan sokongan penyemak imbas apabila memilih antara dua kaedah.

Atas ialah kandungan terperinci Bagaimanakah anda boleh memastikan div kekal tetap selepas menatal kepadanya, walaupun kedudukan awalnya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
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