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

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

この記事では、固定位置 Div 内の水平方向のコンテンツ スクロールの問題に対処します。 jQuery を使用して div を配置します。

ユーザーは、scroll_fixed クラスの div を持っており、ページの先頭に到達したときにそれを修正したいと考えています。次の CSS スタイルで div をスタイルします:

.scroll_fixed {
    position:absolute
    top:210px
}
.scroll_fixed.fixed {
    position:fixed;
    top:0;
}

jQuery コードは、div が先頭に達したときに固定クラスを追加するために使用されます:

$(window).scroll(function (event) {
    // Check if the scroll position is greater than the top offset of the div
    if ($(this).scrollTop() >= top) {
        $('.scroll_fixed').addClass('fixed');
    } else {
        $('.scroll_fixed').removeClass('fixed');
    }
});

これは垂直スクロールではうまく機能しますが、ブラウザウィンドウが小さい場合、div の右側のコンテンツと競合します。ユーザーは、div がコンテンツとともに水平方向にスクロールすることを望んでいます。

/解決策:

div を水平方向にスクロールさせるには、その位置を固定して操作する必要があります。上部ではなく左側のプロパティ。次の更新された jQuery コードはこれを実現します。

var leftInit = $(".scroll_fixed").offset().left;

$(window).scroll(function (event) {
    // Get the current scroll positions
    var x = 0 - $(this).scrollLeft();
    var y = $(this).scrollTop();

    // Fix the div when it reaches the top
    if (y >= top) {
        $('.scroll_fixed').addClass('fixed');
    } else {
        $('.scroll_fixed').removeClass('fixed');
    }

    // Adjust the left offset of the div based on the scroll position
    $(".scroll_fixed").offset({
        left: x + leftInit
    });
});

leftInit を使用することで、div の左マージンを考慮します。このソリューションを http://jsfiddle.net/F7Bme/

で試してください。

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