CSS プロパティ「position: sticky」を使用すると、スクロール中に要素を画面上の特定の場所に固定することができます。これは、要素を所定の位置に固定するのと似ています。このプロパティは、訪問者が Web サイトを閲覧する際に、サイドバーなどの重要な要素の可視性を維持するのに非常に役立ちます。
このガイダンスでは、次のことを理解できます。
- 「position:sticky」の実装手順
- トラブルシューティングのテクニック
「position:sticky」の使用に関するガイドライン
「position:sticky」の動作は、ユーザーのスクロール アクティビティに基づいて、要素の位置を相対位置と固定位置の間で切り替えます。sticky 要素は、特定のスクロール ポイントに到達するまでフロー内で相対位置を保持し、その段階では、直下の親内の固定要素と同様に動作します。sticky 要素が親コンテナーの下部に到達すると、それ以上移動しなくなります。
サイドバーで「position: sticky」を利用するには:
- 作業領域内のサイドバーを選択します
- アクセス スタイルパネル > 位置
- 選ぶ スティッキー 提供された選択肢から
- 上、下、左、右の端に特定の値を割り当てます (例: 0px、30px など)
基本的に、「position: sticky」が正しく機能するには、上、下、左、または右のいずれかに少なくとも 1 つの位置値を指定する必要があります。これは、要素が親に対してどこに配置されているか、およびユーザーのスクロール方向 (垂直または水平) によって異なります。
サイドバーをページの上部に固定するには、上部の値を 0px に設定します。または、30px の余白で上部に固定したい場合は、上部の値として 30px を割り当てます。スクロールすると、サイドバーはサイドバーのコンテナー (つまり、直接の親) 内のページ上に固定されたままになります。
トラブルシューティングのガイドライン
「position: stick」に関する問題は、次の場合に発生する可能性があります。
- 要素の少なくとも 1 つの端 (上、下、左、右など) に特定の距離値が指定されていません。
- オーバーフローは、要素の親要素ではhidden、scroll、autoに制限されます。
- 親要素の高さは明示的に定義されています
- の ブラウザは固定配置をサポートしていません
要素の少なくとも 1 つの端 (上、下、左、右など) に特定の距離値が割り当てられていない場合、「position: sticky」の機能は妨げられます。スクロールの影響を受けない端に距離値を適用すると、「position: sticky」の動作が期待どおりにならない場合があります。たとえば、垂直方向にスクロールしているときに左側または右側に距離を設定すると、サイドバーが意図したとおりに固定されなくなります。
「position: stick」の効果は、特にサイドバーがフレックス コンテナーまたはグリッド コンテナーの子である場合、配置設定によって損なわれることもあります。たとえば、フレックス プロパティまたはグリッド プロパティを持つ親要素でサイドバーを上部に揃えながら下部に距離を割り当てると、サイドバーがページの下部に固定されなくなります。
- ワークスペーススポットとメンバーの追加または削除 - 2024年4月15日
- センタリングボックスの概要 - 2024年4月15日
- 将来の参照用にサイトを保存する - 2024年4月15日