如何在滚动时更改不同背景颜色的汉堡菜单颜色？答案

【问题标题】：How to change burger menu color on different background color while scrolling?如何在滚动时更改不同背景颜色的汉堡菜单颜色？
【发布时间】：2021-05-28 19:19:46
【问题描述】：

你能帮我解决这个问题吗？我尝试了其他问题的提示，但不幸的是没有帮助。我想根据不同部分的背景颜色更改自定义汉堡菜单的颜色（具有悬停效果）。这是我的 HTML 和 CSS：

https://jsfiddle.net/s4gh8cw9/

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Test</title>
</head>
<style>
.section {
  width: 100%;
  height: 450px;
  background-color: white;
}

.section-black {
  width: 100%;
  height: 450px;
  background-color: black;
}

.special-con {
   cursor: pointer;
   display: inline-block;
 }
 
 .bar {
   display: block;
   height: 2px;
   width: 20px;
   background: #000000;
   margin: 5px auto;
 }
 
 .col {
   display: inline-block;
   width: 24%;
   text-align: center;
   height: auto;
   position: fixed;
 }
 
 .bar {
   -webkit-transition: all .4s ease;
   -moz-transition: all .4s ease;
   -ms-transition: all .4s ease;
   -o-transition: all .4s ease;
   transition: all .4s ease;
 }
 
 .con:hover .arrow-top-fall {
   -webkit-transform: translateY(-5px);
   -moz-transform: translateY(-5px);
   -ms-transform: translateY(-5px);
   -o-transform: translateY(-5px);
   transform: translateY(-5px);
 }
 
 .con:hover .arrow-bottom-fall {
   -webkit-transform: translateY(5px);
   -moz-transform: translateY(5px);
   -ms-transform: translateY(5px);
   -o-transform: translateY(5px);
   transform: translateY(5px);
 }
 
 .special-con {
   margin: 0 auto;
   -webkit-transition: all .4s ease;
   -moz-transition: all .4s ease;
   -ms-transition: all .4s ease;
   -o-transition: all .4s ease;
   transition: all .4s ease;
 }
 
 .special-con:hover .arrow-top-fall {
   -webkit-transition: all .4s ease-in-out;
   -moz-transition: all .4s ease-in-out;
   -ms-transition: all .4s ease-in-out;
   -o-transition: all .4s ease-in-out;
   transition: all .4s ease-in-out;
   -webkit-transform: translateY(-5px);
   -moz-transform: translateY(-5px);
   -ms-transform: translateY(-5px);
   -o-transform: translateY(-5px);
   transform: translateY(-5px);
 }
 
 .arrow-bottom-fall,
 .arrow-top-fall {
   -webkit-transition: all .4s ease-in-out;
   -moz-transition: all .4s ease-in-out;
   -ms-transition: all .4s ease-in-out;
   -o-transition: all .4s ease-in-out;
   transition: all .4s ease-in-out;
 }
 
 .special-con:hover .arrow-bottom-fall {
   -webkit-transform: translateY(5px);
   -moz-transform: translateY(5px);
   -ms-transform: translateY(5px);
   -o-transform: translateY(5px);
   transform: translateY(5px);
   -webkit-transition: all .4s ease-in-out;
   -moz-transition: all .4s ease-in-out;
   -ms-transition: all .4s ease-in-out;
   -o-transition: all .4s ease-in-out;
   transition: all .4s ease-in-out;
 }
</style>
<body>
  <div class="section">
    <div class="col">
        <div class="special-con">
            <a href="#elementor-action%3Aaction%3Dpopup%3Aopen%26settings%3DeyJpZCI6IjE0MDYiLCJ0b2dnbGUiOmZhbHNlfQ%3D%3D">
              <div class="bar arrow-top-fall"></div>
              <div class="bar arrow-middle-fall"></div>
              <div class="bar arrow-bottom-fall"></div>
            </a>
        </div>
    </div>
  </div>
  <div class="section-black">
  </div>
  <div class="section">
  </div>
  <div class="section-black">
  </div>
  <div class="section">
  </div>
  <div class="section-black">
  </div>
  <div class="section">
  </div>
</body>
</html>

非常感谢！

【问题讨论】：

这能回答你的问题吗？ Color change hamburger menu depending on background color

标签： javascript html jquery css scroll

【解决方案1】：

我希望这段代码对你有用。

$(window)
        .scroll(function () {
          var scroll = $(window).scrollTop() + $(window).height() / 3;
          $('.panel').each(function () {
            var $this = $(this);
            if (
              $this.position().top <= scroll &&
              $this.position().top + $this.height() > scroll
            ) {
              $('body').removeClass(function (index, css) {
                return (css.match(/(^|\s)color-\S+/g) || []).join(' ');
              });
              $('body').addClass('color-' + $(this).data('color'));
            }
          });
        })
        .scroll();

body {
        color: #000;
        background-color: #ffffff;
        transition: all 0.4s linear;
        text-align: center;
        font-size: 120%;
        line-height: 1.618;
      }

      .panel {
        min-height: 100vh;
        display: flex;
        justify-content: space-around;
        align-items: center;
        font-family: sans-serif;
        position: relative;
      }
      .color-black .hamburger {
        color: #fff;
      }
      .hamburger {
        position: fixed;
        top: 10px;
        left: 10px;
        color: #000;
      }
      .color-black {
        background-color: #000000;
        color: #fff;
      }
      h1 {
        font-size: 4em;
        line-height: 140%;
      }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="panel" data-color="white">
      <div>
        <h1>Hamburger Color Change</h1>
        <a class="hamburger" href="javascript:void(0)">Hamburger</a>
      </div>
    </div>
    <div class="panel" data-color="black">
      <h2>Dark Area 01</h2>
    </div>
    <div class="panel" data-color="white">
      <h2>Light Area 01</h2>
    </div>
    <div class="panel" data-color="black">
      <h2>Dark Area 02</h2>
    </div>
    <div class="panel" data-color="white">
      <h2>Light Area 02</h2>
    </div>
    <div class="panel" data-color="black">
      <h2>Dark Area 03</h2>
    </div>
    <div class="panel" data-color="white">
      <h2>Light Area 03</h2>
    </div>
    <div class="panel" data-color="black">
      <h2>Dark Area 04</h2>
    </div>

【讨论】：

【解决方案2】：

您可以使用 Intersection Observer API 和其他一些库..

https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API

或者航点库

https://github.com/imakewebthings/waypoints

希望对你有用

【讨论】：

第二个链接失效了。请检查并更正。
现在，您可以查看?