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

Tatal Div Tetap Mendatar dengan jQuery

Dalam masalah ini, kami mempunyai elemen div dengan kedudukan menegak tetap menggunakan jQuery dan CSS. Walau bagaimanapun, penatalan mendatar menyebabkan konflik dengan kandungan di sebelah kanan div. Kami berhasrat untuk mendayakan tatal mendatar untuk div bersama-sama dengan kandungan halaman.

Penyelesaian melibatkan mengekalkan kedudukan tetap untuk elemen, tetapi selain itu memanipulasi sifat kirinya menggunakan jQuery:

<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();

    // Vertical positioning logic
    if (y >= top) {
        $('.scroll_fixed').addClass('fixed');
    } else {
        $('.scroll_fixed').removeClass('fixed');
    }

    // Horizontal positioning
    $(".scroll_fixed").offset({
        left: x + leftInit
    });
});</code>

Dengan menggunakan leftInit, kami mengambil kira sebarang kemungkinan margin kiri pada elemen tetap. Pendekatan ini membenarkan div tetap untuk menatal secara mendatar bersama-sama dengan kandungan, serupa dengan contoh kedua dalam sumber yang disediakan.

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