下記のようなデザインにしたいとき
- メニューの位置が固定
- 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」を除く
}
});
});