HTMLとCSSを備えた動的なサイズの粘着性のサイドバー

ビューポートサイズに適応する粘着性のあるサイドバーを作成することは、HTMLとCSSを使用して驚くほど簡単です。レバレッジposition: stickyと方向性のオフセットの設定（ top: 0など）により、ジャンプツーアンチャーメニューやセクションの見出しなどの機能を簡単に実装できます。より高度な粘着性のあるポジショニング技術については、CSS-Tricksなどのリソースを探索してください。

ただし、粘着性の要素内で動的にサイズのコンテンツを扱うときに課題が生じます。これにより、コンテンツがビューポートの下に隠される可能性があります。これは、サイドバーの高さが利用可能な画面スペースを超える場合の一般的な問題です。

私は最近、メインコンテンツ領域とアクションアイテムとフィルターを含むサイドバーを備えたデスクトップレイアウトを設計しながら、この問題に遭遇しました。サイドバーは、スクロール中にビューポートに固定されたままにする必要がありました。最初のスタイリングはシンプルでしたが、サイドバーのコンテンツのさまざまな高さが課題を提示しました。 max-heightとoverflow-y: autoより大きな画面でうまく機能しましたが、ビューポートが小さいため、サイドバーがオーバーフローしました。

動的な高さの問題を解決します

私の最初のアプローチは、メディアクエリを使用して小さな画面での粘着性のある位置を削除し、コンテナに対してサイドバーを作ることを検討しました。ただし、サイドバーの動的な高さにより、メディアクエリに適したブレークポイントが不可能になりました。ビューポートのサイズに基づいて高さを動的に調整するJavaScriptソリューションは、過度に複雑で、ウィンドウのサイズ変更に問題が発生しやすいように見えました。

よりエレガントなCSSベースのソリューションは効果的であることが証明されました。

ソリューションの実装

メイン要素は、レイアウトにFlexBoxを使用し、デスクトップ幅のために固定flex-basisサイドバーに割り当て、記事要素が残りのスペースを埋めることができるようにしました。 FlexBox Holy Albatrossテクニックにより、メディアクエリなしで小さなビューポートに適切な積み重ねが確保されました。 align-self: startメインの記事で高さが伸びるのを防ぎました。

スティッキーサイドバーの重要なCSS：

 .sidebar {
  -Offset：var（ -  space）;
  / * ... */
  位置：粘着性;
  TOP：var（ -  offset）;
}

これにより、CSSカスタムプロパティ（ --offset ）によって制御されたトップオフセットで粘着性の動作が確立されます。この変数は、一貫した間隔のために再利用されます。

サイドバーコンポーネントの構造：

 。成分 {
  ディスプレイ：グリッド;
  Grid-Template-rows：auto 1fr auto;
}

.component .content {
  Max-Height：500px;
  Overflow-y：auto;
}

これにより、柔軟なレイアウトにCSSグリッドを使用します。コンテンツセクションのmax-height 、過度の成長を防ぎ、 overflow-y: auto必要に応じてスクロールを有効にします。重要なことに、サイドバーコンテキスト内：

 .sidebar .component {
  max-height：calc（100VH-var（ -  offset） * 2）;
}

これにより、ビューポートの高さとオフセットに基づいてmax-height動的に計算し、オーバーフローを防ぎます。

このアプローチは、さまざまなビューポートサイズに適応するレスポンシブな粘着性のサイドバーを作成します。デスクトップには適していますが、「サイドバーへのジャンプ」ボタンやトグルなど、サイドバーを非表示/表示するなど、小規模なデバイスにはさらなる機能強化が必要になる場合があります。ユーザーテストでは、さらなる反復をガイドします。

以上がHTMLとCSSを備えた動的なサイズの粘着性のサイドバーの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。