CSS でのみ X 軸に位置を固定する

Web レイアウトをデザインするときは、要素を特定の軸に固定することが望ましい場合がよくあります。他の方向へのスクロールは引き続き可能です。一般的なシナリオの 1 つは、ユーザーが垂直方向にスクロールしている間、要素が水平方向に留まるように、X 軸上の要素を固定することです。

可能ですか?

はい、 CSSを使用するだけでX軸上の位置を固定することが可能です。

実現方法

これを実現するには、次の手順に従います:

1. 要素の位置を 'absolute' に設定します: これにより、通常のフローから要素が削除されます。
2. 「left」プロパティを使用: 要素の左端を相対的に指定します。
3. jQuery を使用する: jQuery を利用してスクロール イベントに応答し、それに応じて要素の位置を調整します。

jQuery と CSS例:

$(window).scroll(function() {
    $('#header').css({
        'left': $(this).scrollLeft()   15 // Adjust based on CSS 'left'
    });
});

#header {
    top: 15px;
    left: 15px;
    position: absolute;
}

高度なスクリプト:

動的な CSS 変更をサポートするには、次の更新されたスクリプトを使用できます:

var leftOffset = parseInt($('#header').css('left')); // Grab initial left position
$(window).scroll(function() {
    $('#header').css({
        'left': $(this).scrollLeft()   leftOffset // Use initial offset
    });
});

次の手順に従うことで、垂直スクロールを許可しながら、X 軸上の要素の位置を効果的に固定できます。