CSS で垂直スクロールを許可しながら要素の X 軸の位置を固定するにはどうすればよいですか?

CSS のみでの X 軸上の位置の固定: 包括的なガイド

X 軸上の要素の位置を固定する機能一方、垂直スクロールを許可することは、Web デザインでは一般的な要件です。この記事では、CSS と JavaScript を使用してこの効果を実現する手法について説明します。

CSS の実装

CSS のみを使用して X 軸の位置を固定するには、左位置と固定上位置を指定する際の絶対位置プロパティ:

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

これにより要素が配置されます。上から 15 ピクセル、左から 15 ピクセルの位置にあり、ユーザーが垂直にスクロールしてもその位置が維持されます。

JQuery を使用した JavaScript の実装

さらに機能を強化するにはその効果として、JavaScript を使用して、スクロールするページの左側の位置を揃えることができます。

$(window).scroll(function(){
    $('#header').css({
        'left': $(this).scrollLeft() + 15
    });
});

このコードでは、scrollLeft() 関数はウィンドウの水平スクロール位置を返します。この値に 15 を加算すると、ユーザーが水平方向にスクロールした場合でも、要素は左から 15 ピクセル離れた位置に維持されます。

動的スクリプト調整

元のスクリプトでは左の位置が必要ですCSS で 15px に設定します。より柔軟にするには、以下を使用できます:

var leftOffset = parseInt($("#header").css('left')); //Grab the left position left first
$(window).scroll(function(){
    $('#header').css({
        'left': $(this).scrollLeft() + leftOffset
    });
});

このスクリプトは CSS の左位置に基づいて自動的に調整されます。

結論

CSS と JavaScript を使用すると、X 軸上の位置のみを固定でき、要素を水平方向に固定したまま垂直方向にスクロールできます。この手法により、要素の配置の柔軟性と制御が可能になり、ユーザー エクスペリエンスとデザインの多様性が向上します。

以上がCSS で垂直スクロールを許可しながら要素の X 軸の位置を固定するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。