javascript - 在 JS 中根据背景颜色切换元素颜色

Question

我已经编写了一些 JavaScript 代码，几乎可以按我想要的方式工作，但我需要一些帮助来弄清楚如何让它按我需要的方式工作。

我想在固定导航元素(汉堡包)遇到类为 white 的部分时更改它的颜色。现在这是通过添加类 darker< 来实现的 到那个导航元素。

我想不通的是，当我滚动经过不再具有 white 类的元素时，如何删除 darker 类。非常感谢任何帮助!

提前致谢! :)

Code pen demo

代码如下:(在SO中可能没有按预期显示，在Codepen中更好)

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

$(document).ready(function () {
    var change = $('.change');

    $(window).scroll(function () {
        var y = $(this).scrollTop();
        var z = $('.white').offset().top;

        if (y >= z) {
            change.addClass('darker');
        }
        else {
            change.removeClass('darker');
        }
    });
});

//Variables
    $grey-darker: hsl(0, 0%, 21%);
    $grey: hsl(0, 0%, 48%);
    $white: hsl(0, 0%, 100%);
    
    $bold: 900;
    
    //Formatting
    
    * {
    	margin: 0;
    	padding: 0;
    	-webkit-box-sizing: border-box;
    	-moz-box-sizing: border-box;
    	box-sizing: border-box;
    }
    
    body {
      font-family: sans-serif;
      letter-spacing: -1.5px;
    }
    
    h1 {
      color: $white;
      font-size: 7em;
      font-weight: $bold;
    }
    
    //Navigation/
    .navigation {
      display:flex;
      vertical-align:top;
      width: 100%;
      height: 76px;
      position: fixed;
    }
    
    //Hamburger --> This should change from white & blue depending on background color
    
    #hamburger {
      width: 30px;
      height: 20px;
      margin-left: auto;
      align-self: center;
      margin-right: 30px;
      -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, ;
      transition-delay: background 0.4s;
      cursor: pointer;
      z-index: 5;
    }
    
    #hamburger span {
      display: block;
      position: absolute;
      height: 3px;
      width: 100%;
      background: $white;
      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, ;
      transition-delay: background 0.4s;
    }
    
    #hamburger span.change.darker{
      background: Blue;
    }
    
    #hamburger 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;
    }
    
    #hamburger span:nth-child(2) {
      top: 6px;
      -webkit-transform-origin: left center;
      -moz-transform-origin: left center;
      -o-transform-origin: left center;
      transform-origin: left center;
    }
    
    #hamburger span:nth-child(3) {
      top: 12px;
      -webkit-transform-origin: left center;
      -moz-transform-origin: left center;
      -o-transform-origin: left center;
      transform-origin: left center;
    }
    
    #hamburger.open span:nth-child(1) {
      background:white;
      -webkit-transform: rotate(45deg);
      -moz-transform: rotate(45deg);
      -o-transform: rotate(45deg);
      transform: rotate(45deg);
      top: 0px;
      left: 5px;
    }
    
    #hamburger.open span:nth-child(2) {
      width: 0%;
      opacity: 0;
    }
    
    #hamburger.open span:nth-child(3) {
      background:white;
      -webkit-transform: rotate(-45deg);
      -moz-transform: rotate(-45deg);
      -o-transform: rotate(-45deg);
      transform: rotate(-45deg);
      top: 22px;
      left: 5px;
    }
    
    //Main
    
    .container-fullpage {
      display: flex;
      flex-direction: row;
      flex-flow: row wrap;
      align-items: center;
      justify-content: space-around;
      height: 100vh;
      width: 100vw;
    }
    
    .sectionOne {
      background: blue;
    }
    .sectionTwo{
      color: blue;
      background: $white;
    }
    .sectionTwo h1 {
      color: blue;
    }
    .sectionThree{
      background: blue;
    }
    .sectionFour{
      background: $white;
    }
    .sectionFour h1 {
      color: blue;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header class="header">
<nav class="navigation">
  <div class="hamburger" id="hamburger">
  <span class="change"></span>
  <span class="change"></span>
  <span class="change"></span>
</div>
</nav>
</header>
<main>
  <div class="container-fullpage sectionOne">
    <h1 class="home">First Section</h1>
  </div>
  <div class="container-fullpage sectionTwo white">
    <h1>Second Section</h1>
  </div>
  <div class="container-fullpage sectionThree">
    <h1>Third Section</h1>
  </div>
  <div class="container-fullpage sectionFour white">
    <h1>Fourth Section</h1>
  </div>
</main>

Answer 1

我认为这是可以执行您想要的操作的 javascript 代码:

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

$(document).ready(function () {
    var change = $('.change');

    $(window).scroll(function () {
        var top1 = change.offset().top;
        var bottom1 = change.offset().top + change.outerHeight(true);
        var overlapsWhite = false;
        $('.white').each(function() {
            var top2 = $(this).offset().top;
            var bottom2 = $(this).offset().top + $(this).outerHeight(true);

            if (top1 >= top2 && bottom2 >= bottom1){
                overlapsWhite = true;
                return false;
            }
        });

        if (overlapsWhite) {
            change.addClass('darker');
        }
        else {
            change.removeClass('darker');
        }
    });
});

查看Code pen