divに基づいてスクロールのフォント色を変更します

Question

現在、画面の右上に固定されている簡単なMENUボタンをコーディングしています。

通常は黒ですが、ページ上の特定のDiv内にあるときにテキストを白に変更できるようにして、暗い背景イメージにはまだ表示されます。

私は2つの.CSSクラスをセットアップしてスクロールを切り替えるようにしましたが、わかりません。

私はこの結果をどのように達成できますか？

HTML

<div class="NavigationButton menu_white"> 
    MENU 
    </div> 

CSS

.NavigationButton { 
position: fixed; 
top: 5%; 
right: 5%; 
z-index: 99999; 
font-family: neuzeit-grotesk, sans-serif; 
font-weight: 700; 
color: inherit; 
} 

.menu_white { 
color: #fff; 
} 

.menu_black { 
color: #000; 
} 

（未マイサイト）の例サイト：ちょうどスナップスクロールせずに

http://flavinsky.com/home/amaio

おかげ

Answer 1

jQueryを使用すると、スクロール位置を取得し、暗い背景要素の位置に基づいてクラスを切り替えることができます。ここでは例

$(document).ready(function(){ 
    $(window).scroll(function(){ 
    var light_pos = $('#white_div').offset().top; 
    var light_height = $('#white_div').height(); 
    var menu_pos = $('.NavigationButton').offset().top; 
    var scroll = $(window).scrollTop(); 

    if(menu_pos > light_pos && menu_pos < (light_pos + light_height)) { 
     $('.NavigationButton').addClass('menu_black'); 
     $('.NavigationButton').removeClass('menu_white'); 
    } 
    else { 
     $('.NavigationButton').removeClass('menu_black'); 
     $('.NavigationButton').addClass('menu_white'); 
    } 

    }) 
}) 

であり、ここで働いてフィドルhttps://jsfiddle.net/atqkuwhs/

Answer 2

可能な解決策は、ページの上部からdivとメニューのオフセットを取得し、交差したら必要な変更を適用することです。