それを棒にしてください!粘着性のヘッダー🦎🔝


プロパティを導入したcssposition: sticky 2012年に、これの1つの明らかなアプリケーションは、粘着性のヘッダーを作るためです.
このアイデアは簡単です.要素があればposition: sticky , それを通常通り扱いなさいposition: relative ブロックは、画面上にある限り.ユーザーが十分に要素をスクロールするならばh1 ) 画面をオフに移動しますが、親はまだ画面上に表示され、それをそのままのように扱うposition: fixed .
最初に、このプロパティの問題は、採用がいくつかのブラウザのベンダーによって遅くなっていたが、それはもはや問題ではないので、我々は今大きな予約なしで受け入れることができます!テーブルに関する警告があります.

それで、どのように、あなたはちょうどCSSで粘着性のヘッダーを作りますか?


それは超簡単です!
あなたがするすべては
.stayOnTop{
    position: -webkit-sticky;
    position: -moz-sticky;
    position: -ms-sticky;
    position: -o-sticky;
    position: sticky;
    top: 0;
}
プロパティは以下のように設定されます:top , left , right , bottom . だから、要素を上に滞在するには、使用するtop: 0; .
ブラウザの接頭辞を使用して、まだサファリのようないくつかのブラウザのために必要なので、すべてのそれらを追加するには最適ですし、クロスブラウザの互換性の災難を避ける!

テーブル


BIGGGGテーブル用の最良のユースケースの一つです.あなたがデータをスクロールダウンすると、列のヘッダーを一番上に見たいテーブル.
しかし、1つの警告は、クロムとエッジを使用してバグを持っているposition: sticky on thead . それで、このあたりの方法は、それを適用することですth 代わりに.
あなたは大きなデータセットのための簡単なクロスリファレンスのための側面と上部に粘着性のヘッダーを作るために使用することができます、多分あなたは以下のような科学的所見を示しているかもしれません!だから、それはExcelの凍結行を模倣の一種!

その他使用事例

  • それはしばしばその上に主人公のセクションがある付箋ナビゲーションバーを作るために使用されます.ナビゲーションバーは、ユーザーがヒーローのセクションを過去にスクロール修正されます.
  • 以下の例はクールですが、いくつかのJSが必要です.ブログ投稿のための読書進捗バー.アクションでそれを見るためにスクロールします.あなたはクリエイティブを得ることができますsticky あまりにも!
  • あなたがより学びたいならば、私はこれに関するチュートリアルを書きました.


    ブラウザサポート


    限り、あなたはそれを使用しない限りthead , あなたは主要なブラウザーで良いです(下記のイメージの緑の色あせた正方形を見てください).ああ!😜