How to change the navbar's color on request?

Question

I want to change the navbar color when my specific div is hitting the top of the page. It only does it on my second request and not on my first, even though the console says it is working.

I can't find the reason it only works on the second 'box' of the forEach. Maybe it has something to do with that, but I also wrote it separately and it doesn't work.

const boxes = document.querySelectorAll('.Boxes');
const navContainer = document.querySelector('.nav-container');
const navItems = document.querySelectorAll('.nav-item');
const lines = document.querySelectorAll('.line');

window.addEventListener('scroll', function() {
  boxes.forEach((box) => {
    let boxRect = box.getBoundingClientRect();

    if (boxRect.top <= 100 && boxRect.bottom >= 100) {
      navContainer.style.backgroundColor = "#6a994e";
      //console.log(navContainer.style.backgroundColor);
      navItems.forEach((item) => {
        item.style.color = "white";
      })
      lines.forEach((line) => {
        line.style.backgroundColor = "white";
      })
    } else {
      navContainer.style.backgroundColor = "white";
      navItems.forEach((item) => {
        item.style.color = "#6a994e";
      })
      lines.forEach((line) => {
        line.style.backgroundColor = "#6a994e";
      })
    }
  })
});

body{
    margin: 0;
    padding: 0;
    font-family: Arial;
    overflow-x: clip;
}

.nav-container{
    width: 100%;
    height: 75px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 75px;
    padding: 10px 50px;
    background-color: white;
    color: black;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 5;
    transition: all 0.5s linear;
}



.menu-container{
    display: inline-grid;
    justify-items: end;
    align-items: center;
}

.icon{
    position: relative;
    width: 40px;
    height: 40px;
    border: none;
    background-color: transparent;
    z-index: 2;
}

.menu-container .icon .line{
    width: 80%;
    height: 2px;
    background-color: #6a994e;
    position: absolute;
    transition: transform 0.6s linear;
}

.menu-container .icon .line1{
    top: 15px;
    left: 5px;
}
.menu-container .icon .line2{
    bottom: 15px;
    left: 5px;
}

.boxes{
    background-color: #6a994e;
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    overflow-x: hidden;
    animation: theater;
    animation-timeline: view();
    
}


@keyframes theater{
    0%{
        transform: scale(1);
    } 50% {
        transform: scale(2);
    }
}

mplungjan · Accepted Answer

I assume you want the navbar to match the boxcolor on load too? If yes, we can simplify and reuse

document.addEventListener('DOMContentLoaded', function() {
  const boxes = document.querySelectorAll('.Boxes');
  const navContainer = document.querySelector('.nav-container');
  const navItems = document.querySelectorAll('.nav-item');
  const lines = document.querySelectorAll('.line');

  function updateNavBar() {
    for (const box of boxes) {
      const boxRect = box.getBoundingClientRect();
      if (boxRect.top <= 100 && boxRect.bottom >= 100) {
        const boxColor = box.getAttribute('data-color');
        navContainer.style.backgroundColor = boxColor;
        // we can actually drop these if all text is white on whatever background
        navItems.forEach((item) => {
          item.style.color = "white";
        });
        lines.forEach((line) => {
          line.style.backgroundColor = "white";
        });
        return; // Exit the function once the matching box is found
      }
    }
  }

  // Run on page load
  updateNavBar();

  // Run on scroll
  window.addEventListener('scroll', updateNavBar);
});

body {
  margin: 0;
  font-family: Arial, sans-serif;
}

.nav-container {
  position: fixed;
  top: 0;
  width: 100%;
  background-color: white;
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 10px 0;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  transition: background-color 0.3s;
  z-index: 1000;
}

.nav-item {
  color: #6a994e;
  text-decoration: none;
  font-weight: bold;
  transition: color 0.3s;
}

.line {
  height: 2px;
  width: 50px;
  background-color: #6a994e;
  transition: background-color 0.3s;
}

.Boxes {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2em;
  color: white;
}

.box1 {
  background-color: #a2d2ff;
}

.box2 {
  background-color: #ffafcc;
}

.box3 {
  background-color: #bde0fe;
}

.box4 {
  background-color: #ffc8dd;
}


  Home
  About
  Services
  Contact
  


Section 1
Section 2
Section 3
Section 4

How to change the navbar's color on request?

Answers (2)

Related Questions

How to change the navbar&#39;s color on request?

Answers (2)

Related Questions

How to change the navbar's color on request?