ビューポートサイズに適応する粘著性のあるサイドバーを作成することは、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 ）によって制御されたトップオフセットで粘著性の動作が確立されます。この変數(shù)は、一貫した間隔のために再利用されます。

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

 。成分 {
  ディスプレイ：グリッド;
  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動的に計算し、オーバーフローを防ぎます。

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

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