jQueryを使用してページコンテンツを固定Divで水平にスクロールする方法は?-CSSチュートリアル-php.cn

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

Barbara Streisand

リリース： 2024-10-27 20:58:30

オリジナル

564 人が閲覧しました

How to Make a Fixed Div Scroll Horizontally with Page Content using jQuery?

jQuery を使用した固定 Div の水平スクロール

この問題では、jQuery と CSS を使用して垂直位置が固定された div 要素があります。ただし、水平スクロールすると、div の右側のコンテンツと競合が発生します。ページコンテンツとともに div の水平スクロールを有効にすることを目指しています。

この解決策には、要素の固定位置を維持し、さらに jQuery を使用してその 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();

    // Vertical positioning logic
    if (y >= top) {
        $('.scroll_fixed').addClass('fixed');
    } else {
        $('.scroll_fixed').removeClass('fixed');
    }

    // Horizontal positioning
    $(".scroll_fixed").offset({
        left: x + leftInit
    });
});</code>

ログイン後にコピー

leftInit を使用することにより、固定要素上の考えられる左マージンを考慮します。このアプローチにより、提供されたリソースの 2 番目の例と同様に、固定 div がコンテンツとともに水平方向にスクロールできるようになります。

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