CSS と JavaScript でのみ要素を X 軸に固定するにはどうすればよいですか?

X 軸のみに固定された要素の配置

CSS では、position プロパティを使用して要素の配置を制御できます。ページ。デフォルトでは、要素は「静的」に配置されます。これは、要素がページの流れに従って配置されることを意味します。ただし、他の値を使用して要素をより正確に配置することもできます。

x 軸上でのみ要素を固定するには、固定位置を使用できます。これにより、ビューポートに対する要素の位置がロックされるため、ページがスクロールしても要素は水平方向に移動しません。

#element {
  position: fixed;
  top: 0;
  bottom: 0;
}

ただし、単一の軸で固定位置を使用すると、要素が他のコンテンツと重なる可能性があります。垂直スクロール時のページ。これを防ぐには、JavaScript を使用して、ページのスクロール時に Y 軸上の要素の位置を動的に調整します。

JavaScript ソリューション

jQuery を使用すると、次のことができます。スクロール イベント リスナーをウィンドウにアタッチし、それに応じて要素の上部の位置を更新します。

$(window).scroll(function() {
  $('#element').css('top', $(this).scrollTop());
});

これにより、次のことが保証されます。垂直スクロール中、要素は X 軸に固定されたままになります。

CSS ソリューション

純粋に CSS を使用してこの動作を実現する別の方法は、transform:translate() を使用することです。 。この変換関数を要素に適用すると、X 軸上の位置に影響を与えることなく要素を垂直に移動できます。

#element {
  position: fixed;
  left: 15px;
  transform: translate(0, -$(window).scrollTop());
}

このアプローチにより、スクロール時に要素が他のコンテンツと重なることも防止されます。

更新されたソリューション

@PierredeLESPINAY が提案したように、スクリプトのサポート変更を行うためCSS を再コーディングしなくても、parseInt($("#element").css('left')) を使用して要素の左の初期位置を取得し、それをスクリプト内でオフセットとして使用できます。

以上がCSS と JavaScript でのみ要素を X 軸に固定するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。