それを棒にしてください!粘着性のヘッダー🦎🔝
プロパティを導入したcss
このアイデアは簡単です.要素があれば
最初に、このプロパティの問題は、採用がいくつかのブラウザのベンダーによって遅くなっていたが、それはもはや問題ではないので、我々は今大きな予約なしで受け入れることができます!テーブルに関する警告があります.
それは超簡単です!
あなたがするすべては
ブラウザの接頭辞を使用して、まだサファリのようないくつかのブラウザのために必要なので、すべてのそれらを追加するには最適ですし、クロスブラウザの互換性の災難を避ける!
BIGGGGテーブル用の最良のユースケースの一つです.あなたがデータをスクロールダウンすると、列のヘッダーを一番上に見たいテーブル.
しかし、1つの警告は、クロムとエッジを使用してバグを持っている
あなたは大きなデータセットのための簡単なクロスリファレンスのための側面と上部に粘着性のヘッダーを作るために使用することができます、多分あなたは以下のような科学的所見を示しているかもしれません!だから、それはExcelの凍結行を模倣の一種!
それはしばしばその上に主人公のセクションがある付箋ナビゲーションバーを作るために使用されます.ナビゲーションバーは、ユーザーがヒーローのセクションを過去にスクロール修正されます. 以下の例はクールですが、いくつかのJSが必要です.ブログ投稿のための読書進捗バー.アクションでそれを見るためにスクロールします.あなたはクリエイティブを得ることができます あなたがより学びたいならば、私はこれに関するチュートリアルを書きました.
限り、あなたはそれを使用しない限り
position: 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の凍結行を模倣の一種!
その他使用事例
sticky
あまりにも!あなたのブログのための読書進捗バーを作る📊
ロブオレリオ・ Apr 21 ' 20・ 5分読む
#webdev
#javascript
#css
#tutorial
ブラウザサポート
限り、あなたはそれを使用しない限り
thead
, あなたは主要なブラウザーで良いです(下記のイメージの緑の色あせた正方形を見てください).ああ!😜Reference
この問題について(それを棒にしてください!粘着性のヘッダー🦎🔝), 我々は、より多くの情報をここで見つけました https://dev.to/robole/make-it-stick-sticky-headers-in-css-3n4oテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol