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

Cara Menatal Div Kedudukan Tetap Secara Mendatar dengan Kandungan Menggunakan jQuery

Untuk memastikan div tetap menatal secara mendatar dengan kandungan, gabungan CSS dan kod jQuery diperlukan . Begini cara untuk melaksanakannya:

CSS

<code class="css">.scroll_fixed {
    position: absolute;
    top: 210px;
}

.scroll_fixed.fixed {
    position: fixed;
    top: 0;
}</code>

jQuery

<code class="javascript">// Retrieve the initial left offset
var leftInit = $(".scroll_fixed").offset().left;

// Get the top offset of the div
var top = $('.scroll_fixed').offset().top - parseFloat($('.scroll_fixed').css('margin-top').replace(/auto/, 0));


$(window).scroll(function(event) {
    // Calculate the horizontal scroll position
    var x = 0 - $(this).scrollLeft();

    // Calculate the vertical scroll position
    var y = $(this).scrollTop();

    // Position the div based on scroll
    // Horizontally: Left margin of the initial position minus the horizontal scroll position
    // Vertically: Top margin of the initial position minus the vertical scroll position
    if (y >= top) {
        // Display the div at the top of the viewport
        $('.scroll_fixed').addClass('fixed');
    } else {
        // Remove the 'fixed' class from the div
        $('.scroll_fixed').removeClass('fixed');
    }

    $(".scroll_fixed").offset({
        left: x + leftInit,
        top: y
    });

});</code>

Kod ini menguruskan tatal mendatar dengan melaraskan sifat kiri div, memastikan ia kekal disegerakkan dengan kandungan. Pembolehubah leftInit menggabungkan kemungkinan margin kiri untuk meningkatkan ketepatan fungsi.

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!