【JavaScript】特定のスクロール量を基準にする

##開始タグ
「スクロールしたらヘッダーをあれこれしたい」的なことは日々増えている気がするのでメモ。

##方法
例えば、
・スクロールしたらヘッダーの背景を白色にしたい
・ヘッダーの文字サイズを大きくしたい

みたいなCSSで解決できそうなものであれば
・特定のスクロール量を基準にクラス名をつけ外しさせる
方法で対処できます。

common.js

$(window).on("load resize scroll", function() {
	var body = $("body");
	var browseWid = $(window).width(); //ブラウザの横幅取得
	var widPc = browseWid > breakpoint; //PC表示のとき
	var widSp = browseWid <= breakpoint; //SP表示のとき

	var amount = 250; //スクロール量（px）
	var scrollPoint = $(this).scrollTop(); //スクロールした量
	var scrollStartPc = "js-scroll_start_pc"; //PC用
	var scrollStartSp = "js-scroll_start_sp"; //スマホ用

	if (widPc) {
		body.removeClass(scrollStartSp);
		if (scrollPoint > amount) {
			body.addClass(scrollStartPc);
		} else if (scrollPoint == 0) {
			body.removeClass(scrollStartPc);
		}
	} else if (widSp) {
		body.removeClass(scrollStartPc);
		if (scrollPoint > amount) {
			body.addClass(scrollStartSp);
		} else if (scrollPoint == 0) {
			body.removeClass(scrollStartSp);
		}
	}
});

あとは、PCの場合なら「.js-scroll_start_pc」を頭に書いて、各CSSを書いてあげればOK。

##閉じタグ
もっといい方法はある気がするけど、現状はこの状態。
今後改善方法を発見し次第取り入れていきます。