position: stickyがとても便利。

このサイトのメニュー部分でも使っておりますが、position: stickyがとても便利。

この対応ブラウザであれば ヘッダー 要素が fixed していると思います。

導入はとても簡単

HTML

<header class="header-sticky">AcuityDesign</h2>

CSS

.header-sticky {
   position: -webkit-sticky; /* Safari */
   position: sticky; top: 0;
 }

header要素の位置までスクロールしてくると(若干一番上のサーチボックスなどがある部分からずれて) fixed されます。

スクロールし「その位置に来ると」という部分が通常の fixed とは異なります。

position sticky 是非使ってみてください。