固定ヘッダーまたは上部へのスクロールに関しては、CSS の 2 つの API の 2 つのプロパティを知る必要があります。
位置: スティッキー;
position: sticky;CSSにおける位置決め方法です。要素に適用すると、スクロール時に要素は親コンテナの指定された位置に固定され、スクロールが特定の位置に到達するか条件が満たされるまで固定が解除されません。
要素のposition属性を に設定しsticky、 をtop、right、bottom 或 left 中至少一个值指定する必要があります确定元素固定的位置。スクロールすると滚动到元素的固定位置、元素会固定在该位置不动，直到离开固定位置。
この配置方法は、ページがスクロールしても表示されたままにする必要があるナビゲーション バーやサイドバーなどの要素によく使用されます。より柔軟で、必要に応じてさまざまな位置に要素の固定状態を設定できます。
オーバーフロー-y: 表示されます。
overflow-y: visible;CSSで要素の縦方向にオーバーフロー内容を設定するために使用されるメソッドです。要素に適用すると、如果元素的内容超出了容器的高度，将会显示溢出的内容，不会进行任何剪裁或滚动. PS: この機能を使用すると、上部の効果を設定するときに要素の高さを保持できるため、position: sticky;top:0;コンテナ内のスクロールの高さを正しく計算できることに注意することが非常に重要です。
以下に示すように:
1.overflow: visible;設定なしの効果:
2.overflow: visible;設定ありの効果:
スクロール時にギャップがあることがわかった場合は、一部の DOM 要素の padding-bottom または padding-top 値を調整する必要があります。または、top 値を調整することもできますposition: sticky;top:0;。
以下に示すように:
これは、コンテンツがコンテナーの高さを超えた場合でも、スクロールバーが表示されないか、オーバーフローが切り取られることを意味します。コンテンツは完全に表示され、コンテナのレイアウトに影響を与える可能性があります。
- - - - - - - - - - - - - - - -分割線 - - - - - - - - - ---------------
オーバーフローの対応する属性値は次のとおりです。
overflow-y: hidden;:オーバーフロー コンテンツは非表示になり、表示されません。
overflow-y:scroll;:コンテンツがコンテナの高さを超える場合、スクロール バーが表示され、ユーザーはスクロールして超過したコンテンツを表示できます。
overflow-y: auto;:コンテンツがコンテナの高さを超えた場合、スクロールバーを表示するかどうかを必要に応じて設定し、コンテンツがコンテナの高さを超えない場合、スクロールバーは表示されません。
overflow: overlay; : overflow: overlay; を要素に適用すると、コンテンツがコンテナのサイズを超えるとスクロール バーが表示されます。スクロールとは異なり、スクロール バーはコンテンツの上にフローティング形式で表示され、コンテナーのスペースを占有しません。これは、スクロールバーが表示されても、コンテンツがクリップされないことを意味します。同時に、コンテンツがコンテナを超えない場合、スクロールバーは表示されません。
注: これらのプロパティは、主に垂直方向のコンテンツのオーバーフロー処理に使用されます。水平方向と垂直方向の両方のオーバーフロー処理を設定したい場合は、overflow プロパティを使用できます。