jQueryを使用して固定Divをコンテンツとともに水平方向にスクロールする方法は?

jQuery を使用したコンテンツの水平スクロール Div の修正

質問:

どうすればよいですかコンテンツとともに水平にスクロールするように固定 div の位置を設定しますか?

詳細な説明:

CSS クラス「scroll_fixed」を持つ div 要素が初期設定されます絶対的な位置に。ただし、div がページの先頭に達すると、jQuery コードはその位置を固定するために「fixed」クラスを追加します。この設定は垂直スクロールにはうまく機能しますが、水平スクロールでは右側のコンテンツで問題が発生します。

目標:

次のように、コンテンツとともに div を水平にスクロールします。提供された例の 2 番目のボックス。

答え:

div の水平スクロールを実現するために、ソリューションでは要素の位置は固定されたままですが、その left プロパティを操作します。

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

    // Check if the element should be fixed based on vertical scroll
    if (y >= top) {
        // if so, ad the fixed class
        $('.scroll_fixed').addClass('fixed');
    } else {
        // otherwise remove it
        $('.scroll_fixed').removeClass('fixed');
    }

    // Adjust the element's left position based on horizontal scroll
    $(".scroll_fixed").offset({
        left: x + leftInit
    });

});</code>

これにより、div は垂直方向の固定位置を維持しながら、ページのコンテンツとともに水平方向にスクロールします。

以上がjQueryを使用して固定Divをコンテンツとともに水平方向にスクロールする方法は?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。