根据div更改滚动时的字体颜色 [英] Change font color on scroll based on a div

问题描述

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

I am currently coding a simple MENU button that is fixed in the top right of the screen.

文字通常是黑色，但我想成为能够在文本在页面上的某个Div内时将文本更改为白色，以便在深色背景图像上仍然可见。

With the text it is normally Black, but I want to be able to change the text to White when it is within a certain Div on a page so it is still visible on the dark background images.

我已经设置了两个.CSS课程，并试图让他们打开滚动，但我无法弄清楚。

I had set up two .CSS classes and tried to get them to switch on scroll but I cannot figure it out.

任何人都知道如何实现这一结果？

Anyone know how I can achieve this result?

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

(Not My Site) Example site: http://flavinsky.com/home/amaio

没有快照滚动

谢谢

推荐答案

您可以使用jQuery来获取滚动条根据深色背景元素的位置来定位和切换类。这是一个例子

You can use jQuery to get the scroll position and toggle the classes based on where the dark background element is. Here is an example

$(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/

and here is a working fiddle https://jsfiddle.net/atqkuwhs/

这篇关于根据div更改滚动时的字体颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！