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

ただし、粘著性の要素內(nèi)で動(dòng)的にサイズのコンテンツを扱うときに課題が生じます。これにより、コンテンツがビューポートの下に隠される可能性があります。これは、サイドバーの高さが利用可能な畫(huà)面スペースを超える場(chǎng)合の一般的な問(wèn)題です。

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

動(dòng)的な高さの問(wèn)題を解決します

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

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

ソリューションの実裝

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

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

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

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

サイドバーコンポーネントの構(gòu)造：

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

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

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

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

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

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

以上がHTMLとCSSを備えた動(dòng)的なサイズの粘著性のサイドバーの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語(yǔ) Web サイトの他の関連記事を參照してください。