スクロール中に固定 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 値は現在のスクロール オフセットの負の値として設定され、水平スクロールとともに div を効果的に移動します。
3. leftInit は、 div は適切に考慮されます。

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

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