スクロール中に固定 Div の水平位置を修正するにはどうすればよいですか?

固定位置 Div の水平スクロール

このクエリでは、ユーザーは固定位置 Div が水平にスクロールされるときにコンテンツの衝突を防ぐ解決策を探します。他のコンテンツと一緒に。 jQuery を使用した最初の実装では、垂直方向の div は正常に修正されましたが、水平スクロールはサポートされていません。

提案された解決策には、要素の left プロパティを操作するために jQuery コードを変更することが含まれます:

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

});

説明

1. leftInit は、div の初期左オフセットを保存します。
2. スクロール時、x 値は現在のスクロール オフセットの負の値として設定されます。
3. leftInit は、div の左マージンが適切に考慮されることを保証します。

このアプローチでは、div の固定位置を維持しながら、それを許可します。コンテンツに沿って水平にスクロールして、衝突を防ぎ、ユーザー エクスペリエンスを向上させます。

以上がスクロール中に固定 Div の水平位置を修正するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。