Bagaimana untuk Membuat Tatal Div Kedudukan Tetap Secara Mendatar dengan Kandungan Menggunakan jQuery?

Tatal Mendatar Div Kedudukan Tetap Menggunakan jQuery

Dalam artikel ini, kami akan menangani isu menatal kandungan mendatar dalam tetapan position div menggunakan jQuery.

Seorang pengguna mempunyai div dengan kelas scroll_fixed dan mahu membetulkannya apabila ia mencapai bahagian atas halaman. CSS berikut menggayakan div:

.scroll_fixed {
    position:absolute
    top:210px
}
.scroll_fixed.fixed {
    position:fixed;
    top:0;
}

Kod jQuery digunakan untuk menambah kelas tetap apabila div mencapai bahagian atas:

$(window).scroll(function (event) {
    // Check if the scroll position is greater than the top offset of the div
    if ($(this).scrollTop() >= top) {
        $('.scroll_fixed').addClass('fixed');
    } else {
        $('.scroll_fixed').removeClass('fixed');
    }
});

Ini berfungsi dengan baik untuk menatal menegak, tetapi menyebabkan konflik dengan kandungan di sebelah kanan div apabila tetingkap penyemak imbas kecil. Pengguna mahu div menatal secara mendatar dengan kandungan.

/Penyelesaian:

Untuk membuat div menatal secara mendatar, kita perlu mengekalkan kedudukannya:tetap dan memanipulasi harta kiri dan bukannya atas. Kod jQuery yang dikemas kini berikut mencapai ini:

var leftInit = $(".scroll_fixed").offset().left;

$(window).scroll(function (event) {
    // Get the current scroll positions
    var x = 0 - $(this).scrollLeft();
    var y = $(this).scrollTop();

    // Fix the div when it reaches the top
    if (y >= top) {
        $('.scroll_fixed').addClass('fixed');
    } else {
        $('.scroll_fixed').removeClass('fixed');
    }

    // Adjust the left offset of the div based on the scroll position
    $(".scroll_fixed").offset({
        left: x + leftInit
    });
});

Dengan menggunakan leftInit, kami mengambil kira sebarang jidar kiri pada div. Cuba penyelesaian ini di: http://jsfiddle.net/F7Bme/

Atas ialah kandungan terperinci Bagaimana untuk Membuat Tatal Div Kedudukan Tetap Secara Mendatar dengan Kandungan Menggunakan jQuery?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!