ヘッダー、フッター固定はもう「position: sticky」でいいね

「static]と「fixed」を合わせ持つかのような「sticky」

/* HTML */
<div id="wrapper">
  <header>ヘッダー</header>
  <main>
   <seciton>コンテンツ</section>
   <seciton>コンテンツ</section>
   <seciton>コンテンツ</section>
  </main>
  <footer>フッター</footer>
</div>

上記の構成でヘッダーを固定したい場合CSSを以下のようにする。

/* CSS */
header {
  position:-webkit-sticky; /* 古いiOS用。なくてもいいかも */
  position:sticky;
  top:0; /* どの位置に固定するかを必ず示す */
}

たったこれだけでスクロールしてヘッダーが隠れる位置まで行くと、何事もなかったように固定される。
もちろんスクロールアップして最上部まで行けば、ヘッダー要素分の高さは確保されて元の位置に戻る。
定位置に戻った時に、position: fixed や absolute の様にヘッダー要素がフロート化して高さがなくなることもない。
なので下に表示される部分をどうするか？などいらぬ心配をしなくてよい。
親要素に「relative 忘れてた！」なんてうっかりもない。

直前の親要素の中だけが稼働範囲

上記のHTMLサンプルで言うと「wrapper内」だけで固定される。したがって wrapper 以降にコンテンツがあった場合　wrapper　最下部に固定されて、それ以降は表示されない。なのでページ内に常に固定表示させたい場合は、最上部のコンテナの直下に置くこと必須。

ちなみに今までの方法も

今まで行っていた固定方法の流れをまとめると

1. HTML、CSSともに普通にヘッダーを設置
2. 新たにclassセレクタで「固定された」状態を指定
3. JSでスクロール値を検知。指定した値を過ぎたら上記2のクラスを付加
4. ついでにJSで指定した値以下になったら上記2のクラスを削除

ここで「どう書くんだっけ？」と大抵時間をロスする。アニメーションなんかコダワると更に時間がかかる。
コードをストックしておけ！と言われればそこまでだが。あ・・・記事にしていたのを忘れてた。

アニメーションが必要な場合は従来通りに

ヌルっと出さないとNG！と言う場合は、よくある感じでゴニョゴニョするしかない。
ただ考えるに「アニメーションするか、そのまま違和感なく固定されるか」で大した違いはない（と考える）今更目新しいものでもないので。
むしろ違和感なくスムーズに固定されるのが閲覧の支障にならないんじゃないかな。