固定サイドバーを設置する

CSS プロパティ「position: sticky」を使用すると、スクロール中に要素を画面上の特定の場所に固定することができます。これは、要素を所定の位置に固定するのと似ています。このプロパティは、訪問者が Web サイトを閲覧する際に、サイドバーなどの重要な要素の可視性を維持するのに非常に役立ちます。

このガイダンスでは、次のことを理解できます。

1. 「position:sticky」の実装手順
2. トラブルシューティングのテクニック

「position:sticky」の使用に関するガイドライン

「position:sticky」の動作は、ユーザーのスクロール アクティビティに基づいて、要素の位置を相対位置と固定位置の間で切り替えます。sticky 要素は、特定のスクロール ポイントに到達するまでフロー内で相対位置を保持し、その段階では、直下の親内の固定要素と同様に動作します。sticky 要素が親コンテナーの下部に到達すると、それ以上移動しなくなります。

サイドバーで「position: sticky」を利用するには:

1. 作業領域内のサイドバーを選択します
2. アクセス スタイルパネル > 位置
3. 選ぶ スティッキー 提供された選択肢から
4. 上、下、左、右の端に特定の値を割り当てます (例: 0px、30px など)

基本的に、「position: sticky」が正しく機能するには、上、下、左、または右のいずれかに少なくとも 1 つの位置値を指定する必要があります。これは、要素が親に対してどこに配置されているか、およびユーザーのスクロール方向 (垂直または水平) によって異なります。

サイドバーをページの上部に固定するには、上部の値を 0px に設定します。または、30px の余白で上部に固定したい場合は、上部の値として 30px を割り当てます。スクロールすると、サイドバーはサイドバーのコンテナー (つまり、直接の親) 内のページ上に固定されたままになります。

トラブルシューティングのガイドライン

「position: stick」に関する問題は、次の場合に発生する可能性があります。

• 要素の少なくとも 1 つの端 (上、下、左、右など) に特定の距離値が指定されていません。
• オーバーフローは、要素の親要素ではhidden、scroll、autoに制限されます。
• 親要素の高さは明示的に定義されています
• の ブラウザは固定配置をサポートしていません

要素の少なくとも 1 つの端 (上、下、左、右など) に特定の距離値が割り当てられていない場合、「position: sticky」の機能は妨げられます。スクロールの影響を受けない端に距離値を適用すると、「position: sticky」の動作が期待どおりにならない場合があります。たとえば、垂直方向にスクロールしているときに左側または右側に距離を設定すると、サイドバーが意図したとおりに固定されなくなります。

「position: stick」の効果は、特にサイドバーがフレックス コンテナーまたはグリッド コンテナーの子である場合、配置設定によって損なわれることもあります。たとえば、フレックス プロパティまたはグリッド プロパティを持つ親要素でサイドバーを上部に揃えながら下部に距離を割り当てると、サイドバーがページの下部に固定されなくなります。