Question

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

我想更改固定导航元素（汉堡包）遇到white类的颜色。现在，可以通过在导航栏中添加darker类来实现元素。

我无法弄清楚的是，当我滚动经过一个不再具有darker类的元素时，如何删除white类。任何帮助深表感谢！

提前谢谢！：）

代码如下：（也许在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

在JS中基于背景色切换元素颜色

1 个答案: