網元公式サイトでも実装してるヘッダーのとこね。
https://ja.amimoto-ami.com/

仕様

HTMLはワンソース
スクロールしたらヘッダーは常に上部に固定

デモ

ソース

JavaScript（jQuery）はスクロール量を判定して対象の DOM に CSS クラスを付与（削除）するだけ
CSS で .scrolled の見た目作っておく
.scrolled 有り・無し間のアニメーションは transition 使う

masthead-scroll.js

(function($) {
	$(window).on('load resize', function(){
		// masthead scroll
		var header   = $('#header-nav'); // fixed DOM
		var addclass = 'scrolled'; // add css class
		var offset   = header.offset();
		var scrollY  = offset.top; // scroll
	
		$(window).scroll(function() {
		if ($(window).scrollTop() > scrollY) {
			header.addClass(addclass);
		} else {
			header.removeClass(addclass);
		}
	});
})(jQuery);

.scrolled の見た目はお好みで。
（デモの方はもうちょっと細かく指定している）

masthead.css


#masthead {
  padding: 15px;
  background: white;
  -webkit-transition: all 0.3s;
     -moz-transition: all 0.3s;
      -ms-transition: all 0.3s;
       -o-transition: all 0.3s;
          transition: all 0.3s;
}

#masthead.scrolled {
  color: white;
  background: rgba(0, 0, 0, 0.8);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
}

IE9？　知らない子ですね。
（クラスは付与されるので、transitionが無効＝ふわっとならないだけ）