CSSの固定位置属性の詳細な説明

モバイル アプリを開発する場合、Web サイトが特定の高さまでスクロールしたときにコンテンツの一部をナビゲーション バーとして表示する必要がある状況によく遭遇します。通常、これを実現するにはスクロール イベントをリッスンする js を使用しますが、新しく追加された CSS 属性 position:sticky を使用すると簡単に実現できます。

私が最後に知っているわけではない: 位置: 固定

position の意味は、配置タイプを指します。可能な値のタイプは、static、relative、absolute、fixed、inherit、sticky です。ここで、sticky は CSS3 で新しくリリースされた属性です。今日注目したいのは粘着性属性です

position:stickyの使い方

• position:sticky は、計算された位置属性がスティッキーである要素である、スティッキー配置要素と呼ばれます。
• 簡単に理解すると、対象領域内では position:relative のように動作します。スライド処理中に、要素とその親要素間の距離が固定配置の要件 (たとえば、top: 100px) に達すると、このときの position:sticky の効果は固定配置と同等になり、適切な位置に固定されます。
• 相対的な位置決めと固定的な位置決めを組み合わせたものと言えます。
• 要素の固定相対オフセットは、スクロール ボックスを持つ最も近い祖先要素を基準とします。祖先要素のいずれもスクロールできない場合、要素のオフセットはビューポートを基準として計算されます。

position:stickyの使用条件

1. 親要素には、overflow:hidden 属性または overflow:auto 属性を指定できません。 2. 上、下、左、右のいずれかの値を指定する必要があります。指定しない場合は相対的な位置付けのみになります。3. 親要素の高さは、スティッキー要素の高さよりも低くすることはできません。4. スティッキー要素は、その親要素内でのみ有効です。

例

マウスが特定の高さまでスライドすると、position:sticky 配置要件がトリガーされ、「人気、新着、おすすめ」が上から 44 ピクセルに固定されます。

CSSコード

.タブコントロール{
  位置: 固定;
  上: 44px;
}

HTMLエリア

<tab-control class="tab-control" :titles="['人気','新着','おすすめ']"></tab-control>

Web 開発では互換性に注意してください。

Sticky はまだ実験的な属性であり、W3C が推奨する標準ではありません。これは、スクロール イベントをリッスンしてスティッキー レイアウトを実装すると、ブラウザーが低速スクロール モードになるために発生します。これは、ハードウェア アクセラレーションによってスクロール エクスペリエンスを向上させるというブラウザーの目的とは相反します。詳細については、下の図を参照してください。基本的に、このプロパティを使用するブラウザは、Firefox と iOS Safari のみです。

要約する

CSS の固定位置属性の詳細な説明については、これで終わりです。CSS の固定位置属性に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。