スクロールしたらメニューの文字色を変える: jQuery

on 2023年8月24日

下記のようなデザインにしたいとき

  • メニューの位置が固定
  • KVが黒系でメニューの文字色は白
  • KV以下は背景が白なので文字色を黒にしたい

jqueryでこのように書いたら解決しました。

jQuery(function(){

	var fontcolor = jQuery('.fontcolor'); //fontcolor を要件定義=CSSの「fontcolor」
	var height = $('.section-top').height(); //ウィンドウの高さを要件定義=CSSの「section-top」
	jQuery(window).scroll(function () {
		if (jQuery(this).scrollTop() > height) { //スクロールが「section-top」を越えたら
			fontcolor.addClass('invert');  //CSSの「invert」を付与(文字色を黒にする)
		} else { //スクロールが画面の高さを越えなければ
			fontcolor.removeClass('invert');  //CSSの「invert」を除く
		}
	});

});