スティッキーヘッダーまたはフッターを?qū)g裝するために、キーはポジションを使用することです。スティッキーヘッダーを?qū)g裝するときは、粘著性と上部：0を設(shè)定し、親コンテナがオーバーフロー：非表示に設(shè)定されていないことを確認(rèn)する必要があります。上書きを防ぐためにZ-Indexを追加することをお勧めします。 1.粘著性ヘッダーはドキュメントフローから離れることはなく、上部にスクロールするときに固定され、他のコンテンツのレイアウトに影響しません。 2。スティッキーフッターを?qū)g裝するには、メインコンテンツをラップしてフッターの位置を設(shè)定する必要があります。 3.粘著性を使用する場合、親要素にはオーバーフローがないことに注意する必要があります。非表示/スクロール/オート、上または下部を指定する必要があり、変換/フィルター/ウィルチェンジおよびその他の屬性の使用、および粘著要素の高さは含まれるブロックを超えることはできません。 Stickyは実用的だが制限的なプロパティであり、スクロールコンテキストに依存する固定位置に適用できます。

実際には、粘著性のヘッダーやフッターを作ることは難しくありません。重要なのは、 position: stickyを使用することです。固定のようにドキュメントストリームから抜け出すことはありませんが、相対的と固定の間であり、スクロール位置に応じて畫面に「貼り付ける」ことができます。しかし、それを正しく使用するには、注意が必要ないくつかの詳細(xì)があります。

粘著性ヘッダーの基本的な書き込み

ヘッダーを上部に固定したいですか？設(shè)定position: stickyとtop: 0 。このようにして、ブラウザが知っている：要素が上部にスクロールするとき、それを修正します。

ヘッダー{
  位置：粘著性;
  上：0;
  z-index：1000;
}

注意すべきいくつかのポイント：

• 親コンテナはオーバーフローすることはできません：隠されています。そうでなければ、粘著性は有効になりません。
• z-indexを追加して、他のコンテンツでカバーされないようにするのが最善です。
• それはスペースを占有せず、消滅しますが、これは固定とは異なります。

たとえば、バナーの寫真が付いたナビゲーションバーがあります。 Sticky Headerは、スクロールアップ後に自然にバナーを上書きしますが、ページの他のコンテンツは引き続きスクロールします。

スティッキーフッターを?qū)g裝する方法

フッターは、ほとんどの場合、デフォルトでコンテンツの最後に表示したいと思うため、下部では粘著性が少し面倒です。コンテンツが十分に高くない場合にのみ、畫面の下部に固執(zhí)するためです。これには、少し構(gòu)造的な調(diào)整が必要です。

一般的な慣行は、ラッパーコンテナを使用してメインコンテンツをラップし、フッターを粘著性に設(shè)定することです。

 <div class = "wrapper">
  <main>ページコンテンツ</main>
  <footer class = "Sticky-footer">これはボトム</footer>です
</div>

CSS：

 .Sticky-Footer {
  位置：粘著性;
  下：0;
  背景：白。
}

ただし、この方法は、コンテンツの高さが1つの畫面未満の狀況にのみ適しています。コンテンツが非常に長い場合でも、フッターは正常にスクロールします。フッターを常にビューポートの下部に（固定と同様）にしたい場合は、 position: fixed使用する必要があります。

よくある質(zhì)問やメモ

粘著性を使用する場合、一部のピットは簡単に踏み続けます。ここにいくつかの一般的なものがあります：

• 親要素がoverflow: hidden/scroll/auto →粘著性の無効な
• topまたはbottom指定されていない→ブラウザは、どこに固執(zhí)したいかわからない
• transform 、 filter 、 will-change 、その他のプロパティの使用→粘著性が無効である可能性があります
• 粘著性要素の高さは、その含有ブロックの高さを超えることはできません

したがって、執(zhí)筆後にこれらの場所を確認(rèn)することを忘れないでください。時々、私ははっきりと粘著性を書いたが、応答しなかった、ほとんどの理由。

基本的にそれだけです。 Stickyは非常に実用的な特性です。すべてのケースが適用されるわけではないことを覚えておいてください。これらのポイントをうまくマスターすると、スティッキーヘッダーやフッターを行うことは難しくありません。

以上がCSS位置を使用してスティッキーヘッダーまたはフッターを作成する方法の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。