Bagaimana untuk Membetulkan Kedudukan Mendatar Div Tetap Semasa Menatal?

Tatal Mendatar Div Kedudukan Tetap

Dalam pertanyaan ini, pengguna mencari penyelesaian untuk mengelakkan pertembungan kandungan apabila div tetap ditatal secara mendatar bersama kandungan lain. Pelaksanaan awal menggunakan jQuery berjaya membetulkan div secara menegak, tetapi tidak mempunyai sokongan untuk menatal mendatar.

Penyelesaian yang dicadangkan melibatkan pengubahsuaian kod jQuery untuk memanipulasi sifat kiri elemen:

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

    // whether that's below the form
    if (y >= top) {
        // if so, ad the fixed class
        $('.scroll_fixed').addClass('fixed');
    } else {
        // otherwise remove it
        $('.scroll_fixed').removeClass('fixed');
    }

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

});

Penjelasan

1. leftInit menyimpan offset kiri awal div.
2. Pada skrol, nilai x ditetapkan sebagai negatif bagi ofset skrol semasa, yang menggerakkan div dengan berkesan bersama-sama dengan skrol mendatar.
3. leftInit memastikan bahawa mana-mana jidar kiri pada div dipertimbangkan dengan betul.

Pendekatan ini mengekalkan kedudukan tetap div sambil membenarkannya untuk menatal secara mendatar bersama kandungan, menghalang pertembungan dan meningkatkan pengalaman pengguna.

Atas ialah kandungan terperinci Bagaimana untuk Membetulkan Kedudukan Mendatar Div Tetap Semasa Menatal?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!