Question

我有一个边栏，当单击汉堡包时会弹出（提供的CodePen不能与此一起使用，但是对于我要实现的目的并不重要，它可以在我的项目中使用）。

我遇到的问题是我的网站遵循黑色和白色主题，并且我希望跨度元素在黑色区域上方时将其颜色更改为白色。我已经看到了几个CodePens，但是它们仅用于向下滚动一次而不是多次更改，因为我有多个暗区。

我想我可能必须将其合并到我现有的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>

CSS

.nav {
    width: 80px;
    background-color: transparent;
    top: 0;
    z-index: 2000;
}

#navBtn {
  width: 50px;
  height: 40px;
  position: relative;
  margin: 15px auto;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .5s ease-in-out;
  -moz-transition: .5s ease-in-out;
  -o-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
  cursor: pointer;
}

#navBtn span {
  display: block;
  position: absolute;
  height: 5px;
  width: 100%;
  background: #000;
  border-radius: 9px;
  opacity: 1;
  left: 0;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .25s ease-in-out;
  -moz-transition: .25s ease-in-out;
  -o-transition: .25s ease-in-out;
  transition: .25s ease-in-out;
}


#navBtn span:nth-child(1) {
  top: 0px;
  -webkit-transform-origin: left center;
  -moz-transform-origin: left center;
  -o-transform-origin: left center;
  transform-origin: left center;
}

#navBtn span:nth-child(2) {
  top: 15px;
  -webkit-transform-origin: left center;
  -moz-transform-origin: left center;
  -o-transform-origin: left center;
  transform-origin: left center;
}

#navBtn span:nth-child(3) {
  top: 30px;
  -webkit-transform-origin: left center;
  -moz-transform-origin: left center;
  -o-transform-origin: left center;
  transform-origin: left center;
}




/* --- nav after */


#sidebar {
    position: fixed;
    width: 300px;
    height: 100vh;
    background: #000;
    left: -300px;
    transition: 0.4s;
    z-index: 1;
}

#sidebar.active {
    left: 0;
    z-index: 1;
}

#sidebar a {
    list-style: none;
    color: #fff;
    font-size: 100%;
    text-decoration: none;
    color: #fff;
}

#sidebar p {
    padding: 20px;
    font-size: 20px;
    text-transform: uppercase;
}

#sidebar .toggle-btn {
    position: absolute;
    left: 300px;
}

.section-black { 
  height: 100vh;
  width: 100vw;
  background-color: black;
}

.section-white { 
  height: 100vh;
  width: 100vw;
  background-color: white;
}

JS

function toggleSidebar() {
    document.getElementById('sidebar').classList.toggle('active');
    var sections = document.querySelectorAll('.new-section'),
        i;
    for (i = 0; i < sections.length; ++i) {
        sections[i].classList.toggle('new_section--active');
    }
};  


$(document).ready(function(){
    $('#navBtn').click(function(){
        $(this).toggleClass('open');
    });
});

这里有一个非常糟糕的CodePen示例：https://codepen.io/caitlinmooneyx/pen/oOPGQQ

Answer 1

这是为了帮助熟悉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’)
      }
   });
});
如果您是像我这样的初学者，只需浏览一下此代码即可   使你的眼睛呆滞。但这实际上很简单。当我们的   访问者向下滚动超过50个像素，我们添加了class changeColor   将背景从绿色更改为白色。当他们   向上滚动，我们删除该类，背景回到   绿色。

第3步：HTML 最后，在HTML文档的底部，标记之前，我们要粘贴以下文本：
   <script src=”https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
   <script src=”scripts.js”></script>
</body>
第一个标记指向由托管的通用jQuery库   谷歌。第二个标签指向我们刚才的Javascript文件   制成。

第4步（可选）：使用一些CSS IMHO使背景更改更平滑，当新的背景颜色出现时效果更好   逐渐消失，而不是突然变化。我们需要的是   简单的CSS效果称为“过渡”。

在我们的CSS文件中，将主体代码更改为：
body {
  background: green;
  transition: 0.3s all;
}
0.3s是过渡效果所花费的时间。随时更改。

第5步：实验！一旦了解了其工作原理，就可以编辑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’)
   } 
});
});

https://medium.com/@_patrickcameron/a-complete-beginner-s-guide-to-changing-background-colour-on-scroll-using-jquery-fce686d55049

Answer 2

您可以仅使用CSS属性混合混合模式“ mix-blend-mode”。

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

mix-blend-mode：差异，如果您要更改背景颜色的元素设置为白色，并且您网站的背景颜色甚至滚动的图像也为白色，则该颜色将显示为黑色。

然后你去

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

CodePen示例：https://codepen.io/DamienSellier/pen/dyGeNom

滚动过去的元素时更改div / span颜色？

2 个答案: