根據div更改滾動條上的字體顏色

Question

我目前正在編碼一個簡單的MENU按鈕，該按鈕固定在屏幕的右上方。

對於文本，通常為黑色，但是我希望能夠在頁面上某個Div內將文本更改為白色，以便在深色背景圖像上仍可見。

我已經建立了兩個.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和菜單的偏移量，並在它們相交后應用所需的更改。