Javascript 滚动元素时更改div/span颜色？

我有一个侧边栏，当点击汉堡包时会弹出（提供的代码笔不适用于此，但对于我试图实现的目标并不重要，它在我的项目中起作用）

我遇到的问题是，我的网站遵循黑白主题，如果跨距元素位于黑暗部分，我希望让跨距元素将颜色更改为白色。我在这上面看到了一些代码笔，但它们只用于向下滚动一次，而不是多次更改，因为我有不止一个黑色部分

我在想，我可能必须将它合并到我现有的JS中，或者我会更高效地创建一个新函数吗？我不确定如何选择跨度和改变其背景颜色时，在一个黑暗的元素，我想我将需要弥补这些新的类，如'暗'或'光'，但我正在努力与如何组成的功能

在我的脑海中，我把它解读为“如果截面类别=黑暗，那么span bg颜色应该=白色，否则截面类别=光明，那么span bg应该=黑色”

我希望这是有意义的，我正在努力学习JS，所以这可能是一个非常简单的解决方案。我理解我正在努力实现的目标，总体布局仍然对编写功能没有信心，但我正在努力掌握它

        <div id="sidebar">
            <div class="content">
                <div class="toggle-btn" onclick="toggleSidebar()">

                    <div class="nav" id="navBar">
                        <div id="navBtn">
                           <span></span>
                            <span></span>
                            <span></span>
                        </div>
                    </div>
                </div>

                <ul>


                    <li><a href="#about">
                            <p class="scrollto-aboutus animated fadeInUp">Home</p>
                        </a></li>
                    <li><a href="#overview">
                            <p class="scrollto-overview animated fadeInUp">text</p>
                        </a></li>

                </ul>
                    <div class="row">
                        <p>Text</p>
                    </div>
                </div>
            </div>
        </div>

    </nav>
<section class="section-black new-section dark"></section>
<section class="section-white new-section light"></section>

JS

函数切换边栏（）{
document.getElementById（'sidebar'）.classList.toggle（'active'）；
var sections=document.querySelectorAll（“.new section”），
我
对于（i=0；i

下面是一个非常糟糕的代码笔示例：

这是为了帮助熟悉HTML和CSS的人， 但不是Javascript，设置一个简单的效果来改变它们的 用户向下滚动时页面的背景色

步骤1:CSS首先，我们需要在身体上设置一个开始的背景颜色：

body {
   background: green;
}

接下来，我们将使用我们想要的背景颜色创建一个新的CSS类 当用户向下滚动时切换到：

.changeColor {
   background: white;
}

步骤2:Javascript在index.html文件所在的文件夹中创建一个名为scripts.js的新文本文档。将以下代码粘贴到 并保存：

$(function() {
   $(window).scroll(function () {
      if ($(this).scrollTop() > 50) {
         $(‘body’).addClass(‘changeColor’)
      }
      if ($(this).scrollTop() < 50) {
         $(‘body’).removeClass(‘changeColor’)
      }
   });
});

0.3s是过渡效果所需的时间量。请随意改变

第五步：实验一旦了解了它的基本工作原理，就可以编辑CSS和Javascript文件来添加、删除和删除 当用户向下滚动时，更改所需的任何元素

例如，创建一个新的CSS类：

.displayNone {
   display: none;
}

在Javascript文件中，添加以下“>50”：

$(‘header’).addClass(‘displayNone’)

下面是“<50”：

$(‘header’).removeClass(‘displayNone’)

现在，当用户向下滚动时，标题元素将消失

下面是我的代码对项目中所有元素的结果，如果 你很好奇：

$(function() {
$(window).scroll(function () {
   if ($(this).scrollTop() > 50) {
      $(‘body’).addClass(‘colorChange’)
      $(‘header’).addClass(‘displayNone’)
      $(‘nav’).removeClass(‘navBackgroundStart’)
      $(‘nav ul’).addClass(‘addBlackBackground’)
   } 
   if ($(this).scrollTop() < 50) {
      $(‘body’).removeClass(‘colorChange’)
      $(‘header’).removeClass(‘displayNone’)
      $(‘nav’).addClass(‘navBackgroundStart’)
      $(‘nav ul’).removeClass(‘addBlackBackground’)
   } 
});
});

$（函数（）{
$（窗口）。滚动（函数（）{
如果（$（this）.scrollTop（）>50）{
$（'body'）.addClass（'colorChange'））
$（'header'）.addClass（'displayNone'））
$（'nav'）.removeClass（'navBackgroundStart'））
$（'nav ul'）.addClass（'addBlackBackground'））
} 
if（$（this）.scrollTop（）<50）{
$（'body'）.removeClass（'colorChange'））
$（'header'）.removeClass（'displayNone'））
$（'nav'）.addClass（'navBackgroundStart'））
$（'nav ul'）.removeClass（'addBlackBackground'））
} 
});
});

---

您只需使用css属性混合模式“混合模式”

使用“混合模式”属性，可以混合元素的背景层（图像或颜色）。混合模式定义为一个值，它们指定如何将背景图像的颜色与其后面的颜色或其他背景图像混合

混合模式：不同， 如果要更改背景颜色的元素设置为白色，并且站点的背景颜色，甚至它滚动的图像也是白色，则颜色将显示为黑色

好了

#element-to-blend{
  background: white;
  z-index: 2;
  mix-blend-mode: difference;
}

---

代码笔示例：

你的意思是什么？请仔细检查接受的答案，这正是我想要达到的，谢谢！实际上，这似乎对我现有的代码不太管用，但我可能可以对它进行调整，似乎这个函数中有太多东西满足了我的需要，而且它把我的大多数其他JS都打倒在绘图板上了。@CaitlinMooney因为这个问题以前被问过，而且你找到了你想要的东西，您可以安全地删除此文件one@Jake代码对我不起作用，它没有考虑span元素，也没有考虑黑色部分，例如没有黑色背景颜色，但包含黑色图像。总的来说，这是我试图实现的，但我需要有它的黑暗或光明部分ID依赖。对不起，我昨天没有看到这个！谢谢你的解释，在这和上面的答案之间，我想我将能够实现我所希望的。马上给你回电话！

$(‘header’).addClass(‘displayNone’)

$(‘header’).removeClass(‘displayNone’)

$(function() {
$(window).scroll(function () {
   if ($(this).scrollTop() > 50) {
      $(‘body’).addClass(‘colorChange’)
      $(‘header’).addClass(‘displayNone’)
      $(‘nav’).removeClass(‘navBackgroundStart’)
      $(‘nav ul’).addClass(‘addBlackBackground’)
   } 
   if ($(this).scrollTop() < 50) {
      $(‘body’).removeClass(‘colorChange’)
      $(‘header’).removeClass(‘displayNone’)
      $(‘nav’).addClass(‘navBackgroundStart’)
      $(‘nav ul’).removeClass(‘addBlackBackground’)
   } 
});
});

#element-to-blend{
  background: white;
  z-index: 2;
  mix-blend-mode: difference;
}