スティッキーになる — CSS スティッキー配置のトラブルシューティング-CSSチュートリアル-php.cn

イバデヒン・モジード著✏️

洗練された Web ページを構築するには、数日、場合によっては数か月かかります。最初はすべてが素晴らしく見えますが、スクロールを開始すると、突然、ナビゲーションメニュー、ヘッダー、サイドバーの行動喚起などの固定要素がまったく固定されないか、配置されるべき場所に留まらなくなります。

イライラしますよね？

最初は些細なバグのように見えても、すぐに大きな問題になる可能性があり、未解決のままにしておくと、サイトのエンゲージメントを大きく損なう可能性があります。

このガイドでは、次の最も一般的なスティッキー配置の問題に取り組みます。

オフセットが指定されていません
フレックス/グリッドコンテナ内のスティッキー要素
スティッキー要素のコンテナの高さ
祖先にはオーバーフロープロパティがあります
body 要素のオーバーフロー

次に、これらのスティッキーポジショニングの問題をトラブルシューティングする方法を、実際の例とスティッキーポジショニングのプロフェッショナルになるためのヒントとともに説明します。一般的な問題を確認した後で、position プロパティと CSS スティッキー位置の概要を確認することもできます。

オフセットが指定されていません

最初の最も簡単なトラブルシューティング手順は、上、右、下、左などのプロパティを使用してオフセットが指定されていることを確認することです。

.sticky-heading {
  position: sticky;
  top: 0; /* Offset not defined - sticky behavior won't activate */
}

ログイン後にコピー

オフセットがないと、スティッキー動作はアクティブになりません。さらに、適用されたオフセットが意図したスクロール方向に適切であることを確認してください。たとえば、垂直スクロールの場合は上または下、水平スクロールの場合は左または右です。

フレックス/グリッドコンテナ内のスティッキー要素

以下の CodePen は、グリッドコンテナー内のスティッキー要素を示しています。

CodePen の Ibaslogic (@ibaslogic) によるグリッドコンテナ内の Pen Sticky 要素を参照してください。

CodePen では、各見出しを保持するコンテナーに十分なスクロール可能なスペースがあるため、見出しが固定されます。レイアウトをよりわかりやすく視覚化するには、コンテンツの周囲に境界線を追加してみてください。これは、セクションをスクロールするときに各見出しがどのように所定の位置に留まるかを確認するのに役立ちます。

Getting sticky with it — Troubleshooting CSS sticky positioning

HTML コードでは、見出しはグリッドコンテナー内に配置され、グリッド項目は使用可能なスペースを埋めるために自然に拡張されます。ただし、この引き伸ばしにより、スティッキー要素にスクロールして貼り付けるための十分なスペースが確保できなくなる可能性があります。

これを解決するために、グリッドコンテナーに align-items: start を適用しました。これにより、スティッキー要素が引き伸ばされるのを防ぎ、意図したとおりに機能するのに十分なスペースが確保されます。

.sticky-heading {
  position: sticky;
  top: 0; /* Offset not defined - sticky behavior won't activate */
}

ログイン後にコピー

align-items: start を使用しないと、グリッドコンテナーが見出しを引き伸ばして利用可能なスペースを埋め、要素がビューポートの上部に張り付くのを防ぎます。これは、以下に示すように、要素を適切にアタッチするのに十分なスクロール可能なスペースがないために発生します。

Getting sticky with it — Troubleshooting CSS sticky positioning

この例ではグリッドの実装を示していますが、同じソリューションがフレックスボックスレイアウトにも適用されます。

スティッキー要素のコンテナの高さ

下の CodePen を操作し、ビューポートをスクロールしてスティッキーの動作を観察すると、レイアウトが視覚的に似ているにもかかわらず、最初のスティッキー要素が期待どおりに機能しないのに対し、2 番目の要素は正しく機能することがわかります。 :

前述したように、スティッキー要素が適切に機能するには、そのコンテナーに十分な高さまたはスクロール可能なスペースが必要です。コンテナを詳しく見てみましょう。最初のレイアウトでは、スティッキー要素は追加の

で囲まれています。

article {
  align-items: start;
  /* ... */
}

ログイン後にコピー

以下の CodePen では、セクションをスクロールして、セクション自体内に付箋見出しがどのように貼り付けられるかを観察できます。スクロール可能な領域を視覚化するために枠線が追加されました:

body要素のオーバーフロー

body 要素にオーバーフローを設定しても、通常、他の祖先要素の場合のようにスティッキーな位置決めが崩れることはありません。

これは、本文がページ全体のプライマリ スクロール コンテキストを作成し、この場合でもスティッキー要素がビューポートを基準にして固定されるためです。<p>

</p><p>
<iframe height="600" src="https://codepen.io/ibaslogic/embed/wvVzBJx?height=600&default-tab=result&embed-version=2" scrolling="no" frameborder="no" allowtransparency="true" loading="lazy">
</iframe>

</p>スクロール メカニズムが作成されても、小さいコンテナ内で行われるようなスティッキー動作は妨げられません。ただし、overflow: hidden を設定する場合を除きます。これにより、ビューポートからオーバーフローするコンテンツをスクロールする機能が削除されます。 <p>

</p>一般的なスティッキーの問題について説明したので、位置プロパティとスティッキー ポジションのより一般的な概要を読むことができます。<p></p><h2>
  
  
  位置プロパティの概要
</h2>

<p>CSS の位置プロパティは、Web ページ上で要素を配置する方法を制御します。相対、絶対、固定、スティッキーなどの値を使用すると、要素を含むブロックまたはビューポート内で上、右、下、左のプロパティを使用して要素の配置を調整できます。これらの値により、z-index を使用して要素を相互に関連付けて配置することもできます。 </p>

<p>ただし、これらのオフセット プロパティ (つまり、上、右、下、左) と Z インデックスは、デフォルトの静的配置の要素には適用されないことに注意してください。 </p>

<p>スティッキー配置のトラブルシューティングに関しては、スティッキー値に伴うものを再検討すると役立ちます。その動作を理解することで、一般的な問題とそれらに効果的に対処する方法をより明確に把握できるようになります。</p>

<h2>
  
  
  CSS スティッキー位置
</h2>

<p>position: Sticky を要素に適用すると、ドキュメント フロー内での位置が維持されるため、相対的に配置された要素と同様に動作します。ただし、「粘着性」になり、スクロールに応答する能力も得られます。 </p>

<p>top: 10px などのオフセットを定義すると、下にスクロールすると要素はその位置に固定され、position: fix を使用しているかのように動作します。水平スクロールの場合、左または右などのオフセットを使用して同様の効果を実現できます。スティッキー動作は要素を含むブロック内にのみ適用されることに注意することが重要です。そのブロックの境界を越えてスクロールすると、スティッキー要素は通常の要素と同様にスクロールして消えます。 </p>

<p>以下の CodePen はスティッキーな動作を示しています。ビューポートをスクロールして、動作中の固定見出しを確認します。</p>

<p><iframe height="600" src="https://codepen.io/ibaslogic/embed/wvVKrrq?height=600&default-tab=result&embed-version=2" scrolling="no" frameborder="no" allowtransparency="true" loading="lazy">
</iframe>
</p>

<p>各 HTML 見出しは、position: Sticky および top: 0 でスタイル設定され、コンテンツをスクロールするときにビューポートの上部に固定されるようになります。ただし、固定見出しはそれぞれのセクションに限定されたままになります。セクションのコンテンツが完全にスクロールされると、その見出しが上に移動し、次の見出しが所定の位置に固定されるようになります。これは、スティッキー要素が親コンテナをエスケープしないことを示しています。</p>

<h2>
  
  
  結論
</h2>

<p>Web ページの構築では、スティッキー要素が期待どおりに機能しないとイライラすることがあります。ただし、祖先のオーバーフロー プロパティや親コンテナの高さなどの重要な要素を理解すると、スティッキー配置の問題のトラブルシューティングに役立ちます。 </p>

<p>このガイドの例とヒントを使用すると、スティッキー ナビゲーション、ヘッダー、サイドバーの CTA がスムーズに機能することを確認できます。このガイドが役立つと思われた場合は、お気軽にオンラインで共有してください。ご質問やご意見がございましたら、コメント欄にご参加ください!</p><hr>

<h2>
  
  
  フロントエンドがユーザーの CPU を占有していませんか?
</h2>

<p>Web フロントエンドがますます複雑になるにつれて、リソースを貪欲な機能がブラウザーに要求します。実稼働環境のすべてのユーザーのクライアント側の CPU 使用率、メモリ使用量などを監視および追跡することに興味がある場合は、LogRocket を試してください。</p>

<p><img src="https://img.php.cn/upload/article/000/000/000/173266096142897.jpg" alt="Getting sticky with it — Troubleshooting CSS sticky positioning"></p>

<p>LogRocket は Web アプリやモバイル アプリ用の DVR のようなもので、Web アプリ、モバイル アプリ、または Web サイトで発生するすべてを記録します。問題が発生する原因を推測する代わりに、主要なフロントエンド パフォーマンス メトリクスを集計してレポートし、アプリケーションの状態とともにユーザー セッションを再生し、ネットワーク リクエストをログに記録し、すべてのエラーを自動的に明らかにすることができます。</p>

<p>Web アプリやモバイル アプリのデバッグ方法を最新化します。無料でモニタリングを始めましょう。</p>

ログイン後にコピー

以上がスティッキーになる — CSS スティッキー配置のトラブルシューティングの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。