スクロールすると背景色が変わるメニュー

<header class="fix_menu">
 <div class="rogo"><a href="index.html"><img src="img/rogo.png" alt="うぇぶぱら"></a></div>
</header>


<div class="box-height">
 <p>スクロール用コンテンツ</p>
</div>

まずはhtmlの説明からです。
headerにクラスでfix_menuという
クラス名つけてます。
ここはjqueryと紐づいてる物になる
ので要注意です！
分かりやすくする為にメニューの
中にはロゴしか入れてないです。

box-heightというdivはスクロールする
為に入れたものなので気にしないで下さい。

.rogo{
	text-align: center;
}
.rogo img{
	width: 100%;
	height: auto;
	max-width: 300px;
}
.fix_menu{
	position: fixed;
	width: 100%;
	top: 0;
	right: 0;
	z-index: 999;
	padding: 30px 0;
	transition: background .5s;
}
.fixedmenu{
	background:#0005FF;
}
.box-height{
	height: 5000px;
	padding-top: 200px;
}
.box-height p{
	-ms-writing-mode: tb-rl;
  	writing-mode: vertical-rl;
	font-size: 30px;
	margin: auto;
}

cssの説明です！
rogoは見た目を良くする為に中央にしてます。

画像がちょっと大きかったので調整しました。
編集すれば良かったのですが、、

ここからですね(‘ω’)ノ
position:fixed;で位置を
top:0;
right:0;
にしてあります！
これでどんだけスクロールしても
常にメニューが画面の一番上にある状態に
なります。
z-index: 999;で前に持って来てあるので
スクロールした先のコンテンツと被っても
メニューが前に見えるようにしてます。
見た目を整えるためにpaddingを入れてます。
大きさは100％です！
transitionですがこれはスクロールした後、
背景色がふわっと変わった方がきれいなので
入れてあります。0.5秒かけて変化するという
記述です！

.fixedMenu・・・これがスクロールしたら
jqueryで追加されるクラス名になります。
ここに変更したい背景色を記述します。

後はスクロールするためのコンテンツ要素
なので気にしないでください( ¯•ω•¯ )

$(function() {
	$(window).on('load scroll', function(){
			if ($(window).scrollTop() > 300) {
					$('.fix_menu').addClass('fixedmenu');
			} else {
					$('.fix_menu').removeClass('fixedmenu');
			}
			
	});
});

さぁjqueryの説明です！
まずはページを読み込んだ時、スクロールする時
の処理内容としてという感じで記述します。

.scrollTop() > 300・・・
スクロールした位置が画面トップから300px
以上の時はfixedMenuというclassを追加します。

300px以下の時はfixedMenuを外します

という意味の記述になります( ¯•ω•¯ )