javascript - 基于div更改滚动上的字体颜色

Question

我目前正在编写一个固定在屏幕右上角的简单菜单按钮。

对于文本，它通常是黑色的，但我希望能够在页面上的某个 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');
    }

  })
})

这是一个工作 fiddle https://jsfiddle.net/atqkuwhs/