向下滾動時導航欄更改，如何使更改響應？

Question

我正在創建一個基本的 web 頁面，我在其中制作了一個非常基本的透明導航欄，其中白色字體字體與深色背景橫幅重疊。 向下滾動並到達淺色背景時，字體變為黑色（至少這是目標）。

問題是，更改不是響應式的，這意味着根據設備和屏幕大小，導航欄的更改不會完全發生在橫幅的底部。 有沒有辦法做到這一點？ 這是我的代碼：

1/ HTML

家庭技能組合生物簡歷聯系方式

<div class="banner">
  <div class="background-gradient">
    <video autoplay muted loop id="myVideo">
      <source src="images/Background_Loop_small.mp4" type="video/mp4">
    </video>
  </div>

  <div class="content">
    <div class="presentation">
      <img src="images/avatar2.jpg" id="avatar">
      <h1 id="place-title">Olivier Girardot</h1>
      <h3 id="text-white">Junior Full-Stack Web Developper</h3>

      <section id="section01" class="demo">
        <div class="container" style="height: 80px"></div>
        <a href="#section02"><span></span><span></span><span></span></a>
      </section>
    </div>
  </div>
</div>

2/ CSS

.navbar {
  margin: 0;
  background: transparent;
  position: fixed;
  color: white;
  display: flex;
  height: 60px;
  z-index: 10;
}

.navbar-links {
  display: flex;
  align-items: center;
  padding: 0px 10px;
}

.navbar-links a:hover {
  opacity: 0.7;
}

.menu {
  position: relative;
  display: flex;
  align-items: center;
  right: 0;
}

.menu a {
  color: white;
  text-decoration: none;
  font-size: 1vw;
  font-weight: 500;
  padding: 0px 10px;
}

.menu a:hover {
  border-bottom: solid white 1px;
}

.navbar-under {
    margin: 0;
    background: #f0f0f0;
    position: fixed;
    color: black;
    display: flex;
    height: 30px;
    z-index: 10;
}

.menu-under {
  position: relative;
  display: flex;
  align-items: center;
  right: 0;
}

.menu-under a {
  color: black;
  text-decoration: none;
  font-size: 1vw;
  font-weight: 500;
  padding: 0px 10px;
}

.menu-under a:hover {
  border-bottom: solid black 1px;
}

3/ Javascript

const navbar = document.querySelector(".navbar");
const menu = document.querySelector(".menu");

window.addEventListener('scroll', () => {
  if (window.scrollY > 700) {
    navbar.classList.remove('navbar');
    navbar.classList.add("navbar-under");
  }
});

window.addEventListener('scroll', () => {
  if (window.scrollY < 700) {
    navbar.classList.remove("navbar-under");
    navbar.classList.add('navbar');
  }
});

window.addEventListener('scroll', () => {
  if (window.scrollY > 700) {
    menu.classList.remove('menu');
    menu.classList.add("menu-under");
  }
});

window.addEventListener('scroll', () => {
  if (window.scrollY < 700) {
    menu.classList.remove("menu-under");
    menu.classList.add('menu');
  }
});

所以我猜這個問題來自window.scrollY > 700或window.scrollY < 700 ，有沒有辦法讓它響應，並使導航欄完全在橫幅底部發生變化？

Answer 1

您應該看看Intersection Observer (IO) ，而不是聽滾動事件

有了這個，您可以在元素與另一個元素或視口重疊時做出反應，因此您可以將其用於導航欄。

這是一個關於這可能如何工作的簡單示例。 它並不完美，但它應該為您提供一個很好的起點來充實它。

如果您需要支持 IE 等舊版瀏覽器，請查看w3c 的官方 polyfill

 const sections = document.querySelectorAll('div'); const config = { rootMargin: '0px', threshold: [.2, .9] }; const observer = new IntersectionObserver(function (entries, self) { entries.forEach(entry => { if (entry.isIntersecting) { var headerEl = document.querySelector('header'); if (entry.intersectionRatio > 0.9) { //intersection ratio bigger than 90% //-> set header according to target headerEl.className=entry.target.dataset.header; } else { //-> check if element is coming from top or from bottom into view if (entry.target.getBoundingClientRect().top < 0 ) { headerEl.className=entry.target.dataset.header; } } } }); }, config); sections.forEach(section => { observer.observe(section); });

 * { margin: 0; padding: 0; box-sizing: border-box; }.g-100vh { height: 100vh } header { min-height: 50px; position: fixed; background-color: green; width: 100%; } header.white-menu { color: white; background-color: black; } header.black-menu { color: black; background-color: white; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <header> <p>Header Content </p> </header> <div class="grid-30-span g-100vh white-menu" style="background-color:darkblue;" data-header="white-menu"> </div> <div class="grid-30-span g-100vh black-menu" style="background-color:lightgrey;" data-header="black-menu"> </div> <div class="grid-30-span g-100vh white-menu" style="background-color:darkblue;" data-header="white-menu"> </div>