Intersectional Observer Navigation Help

Site URL: https://www.ryanewanchuk.com/case-studies/fellowkidsblacklight

Page Link: https://www.ryanewanchuk.com/case-studies/fellowkidsblacklight
Password: SquarespaceDemoHelp!

Hi,

So I have been working on making my navigation change colour based on what the current visible page content background colour is. Surprisingly, I did manage to get it working for the most part, but I am having a few issues I am hoping to get help with.

Problem/Goals
1. When the navigation reaches the first trigger, it changes as it should. However, when it reaches another area below that matches the same criteria, it does nothing. I would like to find a way to make the intersectional observer trigger on multiple sections, and ideally I want to be able to reorder sections and not have any issues.

2. When the navigation changes to black, and the menu is activated via the burger and then closed, the navigation returns to the original colour. I would like to keep the navigation colour the same after the menu is closed.

3. When the menu is opened, it only takes one colour theme. I would like the observer to change the menu overlay as well as the nav colour. This isn't as important as the other two.

Here is the code I am currently using:

<script>
const sectionOne = document.querySelector(".black-section");

const sectionOneOptions = {
  rootMargin: '0px',
  threshold: .6
};
  

  
let prevYPosition = 0
let direction = 'up'

const sectionOneObserver = new IntersectionObserver(function(
  entries,
  sectionOneObserver
) {
  entries.forEach(entry => {
    if (!entry.isIntersecting) {
      header.classList.add("white")
    } else {
      header.classList.remove("white")
    }
  });
},
sectionOneOptions);

sectionOneObserver.observe(sectionOne);
  
</script>