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

Question

can you help me with this please?你能帮我解决这个问题吗？ I tried the tips of other questions but unfortunately that didn't help.我尝试了其他问题的提示，但不幸的是没有帮助。 I want to change the color of my custom burger menu (with hover effect) depending on the background color of different sections.我想根据不同部分的背景颜色更改自定义汉堡菜单的颜色（具有 hover 效果）。 Here is my HTML and CSS:这是我的 HTML 和 CSS：

https://jsfiddle.net/s4gh8cw9/ 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>

Thank you very very much!非常非常感谢你！

Answer 1

You can use Intersection Observer API and some others library..您可以使用 Intersection Observer API 和其他一些库..

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

Or Way Points Library或航点库

https://github.com/imakewebthings/waypoints https://github.com/imakewebthings/waypoints

I hope, it's useful for u希望对你有用

Answer 2

I hope this code will work for you.我希望这段代码对你有用。

 $(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 个解决方案

解决方案1
0 2021-02-26 12:00:07

解决方案2
0 2021-02-26 12:09:45

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

问题描述

2 个解决方案

解决方案1 0 2021-02-26 12:00:07

解决方案2 0 2021-02-26 12:09:45

解决方案1
0 2021-02-26 12:00:07

解决方案2
0 2021-02-26 12:09:45