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

Posted 2023-05-08

技术标签:

【中文标题】如何在滚动时更改不同背景颜色的汉堡菜单颜色？【英文标题】：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 【参考方案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

希望对你有用

【讨论】：

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

以上是关于如何在滚动时更改不同背景颜色的汉堡菜单颜色？的主要内容，如果未能解决你的问题，请参考以下文章

在滚动时分配背景颜色时遇到问题

当用户滚动到不同的页面时，如何在“UICollectionView”的不同背景颜色之间淡化？