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

Membetulkan Div Tatal Mendatar dengan Kandungan Menggunakan jQuery

Soalan:

Bagaimana saya boleh tetapkan kedudukan div tetap supaya ia menatal secara mendatar dengan kandungan?

Penerangan Terperinci:

Elemen div dengan kelas CSS "scroll_fixed" pada mulanya ditetapkan kepada kedudukan mutlak. Walau bagaimanapun, apabila div mencapai bahagian atas halaman, kod jQuery menambah kelas "tetap" untuk menetapkan kedudukannya. Persediaan ini berfungsi dengan baik untuk menatal menegak, tetapi menatal mendatar menyebabkan masalah dengan kandungan di sebelah kanan.

Matlamat:

Jadikan div tatal secara mendatar dengan kandungan, serupa dengan kotak kedua dalam contoh yang disediakan.

Jawapan:

Untuk mencapai penatalan mendatar bagi div, penyelesaian mengekalkan kedudukan elemen tetap tetapi memanipulasi sifat kirinya:

<code class="javascript">var leftInit = $(".scroll_fixed").offset().left;
var top = $('.scroll_fixed').offset().top - parseFloat($('.scroll_fixed').css('margin-top').replace(/auto/, 0));

$(window).scroll(function(event) {
    var x = 0 - $(this).scrollLeft();
    var y = $(this).scrollTop();

    // Check if the element should be fixed based on vertical scroll
    if (y >= top) {
        // if so, ad the fixed class
        $('.scroll_fixed').addClass('fixed');
    } else {
        // otherwise remove it
        $('.scroll_fixed').removeClass('fixed');
    }

    // Adjust the element's left position based on horizontal scroll
    $(".scroll_fixed").offset({
        left: x + leftInit
    });

});</code>

Ini memastikan div menatal secara mendatar dengan kandungan halaman sambil mengekalkan kedudukan tetapnya secara menegak.

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