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

3270 ワード

プロパティを導入した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の凍結行を模倣の一種!