固定ヘッダーを使用して停止し、粘着性のものを使用して起動て

閉じるこの動画はお気に入りから削除されています.多くのサイトはReddit、Facebook、Apple、さらにDevを含むこの種のヘッダーを利用します.これらのサイトのそれぞれは何を共通していますか?彼らはすべて固定ヘッダを使用しています.
私は、これをするより良い方法があることを共有したがっていました、そして、私は誰もなぜ代わりに粘着性のヘッダーを使う方法をとっていないかについて興味があります.

固定ヘッダの問題

ヘッダーのような要素の上でposition: fixedを使用することによって、要素はスタックから取り除かれて、ブラウザーウインドウに関して位置しました.それはもはや、その領域を埋めるために調整される後に配置されたスペースと任意の要素を取ることを意味します.ヘッダーに関しては、それは要素が下に置かれることを意味します、そして、あなたはパディングまたは相対的な位置決めを使用することによってそれのために適応する必要があります.
ヘッダの高さを格納し、本体またはメインタグにパディングを適用するために変数を使用するdevあるいはAppleを参照してください.


または相対的な位置合わせと間隔を調整するトップオフセットを使用してFacebookを使用します.

あるいはRedditで、代わりにマージンを使用します.

これはおそらく、ヘッダを作成するための最悪の方法です.私は、このようなヘッダーが代わりに粘着性の位置決めを使うべきであることを提案します.

粘着性位置決めの利点

ヘッダーのような要素にposition: stickyを使用することによって、それはいくつかの大きなものを行います.まず最初に、それはスタックから要素を取り除きません、それで、それはまだそれが容器の不動産を保ちます.つまり、メインコンテンツとヘッダーの適切な間隔を取るためにこれらのハックを実行する必要はありません.また、それはまだページの上部にあるか、スクロール位置に基づいてそれを必要とどこに滞在します.代わりにposition:fixedにヘッダを設定する
JSによる高さを計算しているか、変数に手動で加える

パッド、余白、またはその変数

との相対的な位置合わせによる内容の位置を調整する

やらなければいけないことは

header {
  position: sticky;
  top: 0;
}

そして、それは余分な変数や計算は必要ありません.
codepenでの非常に簡単な例です.

ブラウザサポート

もちろん、唯一の欠点はIE 11では動作しないことです.

しかし、本当にしかし、誰がアップルウェブサイトまたはdevにアクセスしていますか?多分、私はただ狂っているかもしれませんが、粘着性のポジショニングの上にこの移行を開始することができるいくつかのサイトがあると思います.