Javascript 如何根据背景更改全屏滚动条上的导航文本颜色？

标题真的说明了一切。这是一个我正在努力实现的例子

---

问题是，它需要与使用滚动顶升视差类型效果的站点一起工作，下面是我尝试使用

尝试添加

混合混合模式

属性来实现此效果的站点

将此属性添加到

.navigation菜单

类

CSS

---

希望这有助于…

稍微修改一下滚动脚本

检查演示

创建了用于检查当前节的函数

toggleHeaderColor

。因为滚动脚本按

0（即节_1）、1（即节_2）、2（即节_2）、3（即节_3）、4（即节_2）等顺序索引每个节。每次滚动都会得到更新

在滚动脚本中有两个函数
nextItem（）
和
previousItem（）
表单，我们可以从中获取当前幻灯片索引，并在此基础上调用函数来切换标题元素上的
dark
类

JS:

var sectionBlock=$（“.section项”）；
var getCurrentSlideAttr=0；
功能切换HeaderColor（getCurrentSlideAttr）{
如果（getCurrentSlideAttr==0）{
$（“.menu-link、.menu-link-logo、.menu-link-last”）.removeClass（“深色”）；
}
如果（getCurrentSlideAttr==1）{
$（“.menu-link、.menu-link-logo、.menu-link-last”）.addClass（“深色”）；
}
如果（getCurrentSlideAttr==2）{
$（“.menu-link、.menu-link-logo、.menu-link-last”）.removeClass（“深色”）；
}
如果（getCurrentSlideAttr==3）{
$（“.menu-link、.menu-link-logo、.menu-link-last”）.removeClass（“深色”）；
}
如果（getCurrentSlideAttr==4）{
$（“.menu-link、.menu-link-logo、.menu-link-last”）.addClass（“深色”）；
}
}
var ticking=false；
var isFirefox=/Firefox/i.test（navigator.userAgent）；
瓦里斯=
/MSIE/i.test（navigator.userAgent）||
/三叉戟。*rv \：11\./i.test（navigator.userAgent）；
var滚动灵敏度设置=30；
var SliderationSetting=800；
var currentSlideEnumber=0；
var TotalSlideEnumber=$（“.section item”）.length；
函数视差克罗尔（evt）{
如果（iFirefox）{
delta=evt.详图*-120；
}否则如果（isIe）{
delta=-evt.deltaY；
}否则{
delta=电动轮delta；
}
如果（滴答声！=真）{
if（增量=滚动灵敏度设置）{
滴答声=真；
如果（CurrentSlideEnumber！==0）{
当前滑动枚举器--；
}
上一项（）；
slideDurationTimeout（slideDurationSetting）；
}
}
}
函数slideDurationTimeout（slideDuration）{
setTimeout（函数（）{
滴答声=假；
}，滑动教育）；
}
var mouseweelevent=isFirefox？“DOMMouseScroll”：“轮子”；
window.addEventListener（mouseweelEvent，uu.throttle（视差croll，60），false）；
函数nextItem（）{
getCurrentSlideAttr=CurrentSlideEnumber；
切换HeaderColor（getCurrentSlideAttr）；
var$previousSlide=$（“.section item”）.eq（currentSlideNumber-1）；
$previousSlide
.css（“转换”，“转换3d（0，-130vh，0）”）
.find（“.content wrapper”）
.css（“transform”、“translateY（40vh）”）；
currentSlideTransition（）；
}
函数previousItem（）{
//console.log（$（“.section item”）.eq（currentSlideNumber.attr（'id'））
getCurrentSlideAttr=CurrentSlideEnumber；
切换HeaderColor（getCurrentSlideAttr）；
变量$previousSlide=$（“.section item”）.eq（currentSlideNumber+1）；
$previousSlide
.css（“转换”、“转换3d（0,30vh，0）”）
.find（“.content wrapper”）
.css（“transform”、“translateY（30vh）”）；
currentSlideTransition（）；
}
函数currentSlideTransition（）{
变量$currentSlide=$（“.section item”）.eq（CurrentSlideEnumber）；
$currentSlide
.css（“转换”，“转换3d（0，-15vh，0）”）
.find（“.content wrapper”）
.css（“transform”、“translateY（15vh）”）；
}
更新
实际上，您可以使用css混合模式在白色/黑色背景上选择特定的文本颜色

具有特定颜色的示例（在这种情况下，绿色覆盖白色，红色覆盖黑色）：


html，正文{
保证金：0；
}
h1{
位置：固定；顶部：0；左侧：0；
宽度：100vw；
文本对齐：居中；
混合模式：差异化；
颜色：白色；
z指数：1；
}
div{
位置：相对位置；
宽度：100vw；
高度：100vh；
背景：白色；
保证金：0；
}
分区：第n个类型（2n）{
背景：黑色；
}
部门：之后{
内容：''；
位置：绝对；顶部：0；左侧：0；
宽度：100%；
身高：100%；
z指数：2；
}
div:n类型（2n）：之后{
背景：红色；
混合模式：倍增；
}
div:n类型（2n+1）：之后{
背景：绿色；
混合模式：屏幕；
}
滚动查看效果
这是一个非常基本的解决方案，但是它会使字体看起来像是添加了粗体效果，对于黑色或白色以外的背景色，它会使文本颜色发生变化。最好我正在寻找一个解决方案，允许我控制它在每个部分上的颜色变化。这似乎也不能解决问题。虽然我已经切换到fullpage.js，因为我觉得旧的设置有点笨拙，所以有些代码不再适用。
.navigation-menu{
    mix-blend-mode: difference;
}

var sectionBlock = $(".section-item");
var getCurrentSlideAttr = 0;

function toggleHeaderColor(getCurrentSlideAttr) {
  if (getCurrentSlideAttr == 0) {
    $(".menu-link, .menu-link-logo, .menu-link-last").removeClass("dark");
  }
  if (getCurrentSlideAttr == 1) {
    $(".menu-link, .menu-link-logo, .menu-link-last").addClass("dark");
  }
  if (getCurrentSlideAttr == 2) {
    $(".menu-link, .menu-link-logo, .menu-link-last").removeClass("dark");
  }
  if (getCurrentSlideAttr == 3) {
    $(".menu-link, .menu-link-logo, .menu-link-last").removeClass("dark");
  }
  if (getCurrentSlideAttr == 4) {
    $(".menu-link, .menu-link-logo, .menu-link-last").addClass("dark");
  }
}

var ticking = false;
var isFirefox = /Firefox/i.test(navigator.userAgent);
var isIe =
  /MSIE/i.test(navigator.userAgent) ||
  /Trident.*rv\:11\./i.test(navigator.userAgent);
var scrollSensitivitySetting = 30;
var slideDurationSetting = 800;
var currentSlideNumber = 0;
var totalSlideNumber = $(".section-item").length;
function parallaxScroll(evt) {
  if (isFirefox) {
    delta = evt.detail * -120;
  } else if (isIe) {
    delta = -evt.deltaY;
  } else {
    delta = evt.wheelDelta;
  }
  if (ticking != true) {
    if (delta <= -scrollSensitivitySetting) {
      ticking = true;
      if (currentSlideNumber !== totalSlideNumber - 1) {
        currentSlideNumber++;
        nextItem();
      }
      slideDurationTimeout(slideDurationSetting);
    }
    if (delta >= scrollSensitivitySetting) {
      ticking = true;
      if (currentSlideNumber !== 0) {
        currentSlideNumber--;
      }
      previousItem();
      slideDurationTimeout(slideDurationSetting);
    }
  }
}
function slideDurationTimeout(slideDuration) {
  setTimeout(function() {
    ticking = false;
  }, slideDuration);
}
var mousewheelEvent = isFirefox ? "DOMMouseScroll" : "wheel";
window.addEventListener(mousewheelEvent, _.throttle(parallaxScroll, 60), false);
function nextItem() {
  getCurrentSlideAttr = currentSlideNumber;
  toggleHeaderColor(getCurrentSlideAttr);
  var $previousSlide = $(".section-item").eq(currentSlideNumber - 1);
  $previousSlide
    .css("transform", "translate3d(0,-130vh,0)")
    .find(".content-wrapper")
    .css("transform", "translateY(40vh)");
  currentSlideTransition();
}
function previousItem() {
  //console.log($(".section-item").eq(currentSlideNumber).attr('id'))
  getCurrentSlideAttr = currentSlideNumber;

  toggleHeaderColor(getCurrentSlideAttr);
  var $previousSlide = $(".section-item").eq(currentSlideNumber + 1);
  $previousSlide
    .css("transform", "translate3d(0,30vh,0)")
    .find(".content-wrapper")
    .css("transform", "translateY(30vh)");
  currentSlideTransition();
}
function currentSlideTransition() {
  var $currentSlide = $(".section-item").eq(currentSlideNumber);
  $currentSlide
    .css("transform", "translate3d(0,-15vh,0)")
    .find(".content-wrapper")
    .css("transform", "translateY(15vh)");
}