1

我有一个侧边栏，当单击汉堡包时会弹出（提供的 CodePen 不适用于此功能，但它对我想要实现的目标并不重要，它适用于我的项目）。

我遇到的问题是我的网站遵循黑白主题，如果跨度元素位于黑暗部分，我希望它们将颜色更改为白色。我已经看过几个 CodePens，但它们仅用于向下滚动一次，而不是多次更改，因为我有不止一个黑暗部分。

我想我可能不得不将它合并到我现有的 JS 中，或者我会更有效地创建一个新函数？我不确定如何在深色元素上选择跨度并更改其背景颜色，我想我需要为这些元素创建新的类，例如“深色”或“浅色”，但我正在为如何组合而苦苦挣扎功能。

在我的脑海中，我将其读作“如果部分类 = 暗，则跨度 bg 颜色应 = 白色，否则部分类 = 浅，则跨度 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

4

2 回答 2

2

这是为了帮助那些熟悉 HTML 和 CSS（但不熟悉 Javascript）的人设置一个简单的效果，当用户向下滚动时会改变他们页面的背景颜色。

第 1 步：CSS首先，我们需要在我们的 body 上设置一个起始背景颜色：

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 像素时，我们将类 changeColor 添加到主体，将背景从绿色更改为白色。当他们向上滚动时，我们删除了类并且背景恢复为绿色。

第 3 步：HTML最后，在我们的 HTML 文档底部，就在标签之前，我们要粘贴以下文本：

   <script src=”https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
   <script src=”scripts.js”&gt;</script>
</body>

第一个标签指向一个由 Google 托管的通用 jQuery 库。第二个标签指向我们刚刚创建的 Javascript 文件。

第4步（可选）：使用一些CSS使背景变化更平滑恕我直言，当新的背景颜色淡入时效果看起来更好，而不是突然变化。为此，我们只需要一个简单的 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

于 2019-04-23T14:13:08.340 回答
1

您可以只使用 css 属性混合混合模式“混合混合模式”。

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

mix-blend-mode : 区别，如果你改变背景颜色的元素设置为白色，并且你的站点的背景颜色，甚至它滚动的图像也是白色的，颜色将显示为黑色。

你去吧

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

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

于 2020-07-08T18:43:47.453 回答