Change Navigation BG Colour to Match Section BG Color on Scroll

Site URL: http://www.ryanewanchuk.com

Password: SquarespaceDemoHelp!

Hi,

I am working on my site, and I've decided to use it as a sandbox to try to do some more advanced things. In particular, I am trying to figure out how to make my navigation bg colour change to match the bg colour of a section on scroll. I'd like it to change when 90% of the next section is visible. An example of this is at https://www.bynd.com/

I'm sure this would involve anchors and javascript, but I was curious if there was a simpler way to accomplish this?

It will require JavaScript code. Can you share link to your site?

Site URL: http://www.ryanewanchuk.com

Password: SquarespaceDemoHelp!

So I found this extensive code that does what I want, but I am having syntax errors when using things like the code below. Also, I think there may be an issue with targeting the header/burger in SQSP in Java. 

Got any recomendations?

Source: https://www.smashingmagazine.com/2021/07/dynamic-header-intersection-observer/

Syntax Code: 

/* SET COLOURS FOR SECTIONS AND HEADER*/
:root {
--white: #ffffff;
--black: #000000;
--orange: #f16041;
  
--headerBurger: var(--black);
--header: var(--white);
}

So I have made some progress. I managed to get the header to change from one theme color to another based on the current section theme color. However, there are a few issues.

1. It triggers after the first section is done, even though the next section has the same properties.

2. It is pulling the proper themes in the squarespace editor but when viewing the site outside of squarespace the background color doesn't change.

I feel that there is a Java issue that I have where I'm not telling it to change only when the background tag is changed, but I am not sure. Any help would be great!

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

const sectionOneOptions = {
  rootMargin: '0px',
  threshold: 0
};
  
let prevYPosition = 0
let direction = 'up'

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

sectionOneObserver.observe(sectionOne);
  
</script>

/* === INTERSECTION OBSERVER === */
/* SET COLOURS FOR SECTIONS AND HEADER*/
:root {
--white: #ffffff;
--black: #000000;
--orange: #f16041;
--burger:var(--black);
--header:var(--white);
}


/* CHANGE COLOR ON WHITE THEME */
.header.white{
background-color: white;
border-right: 1px solid #c4c4c4;
burger: var(--black);
}
/* BURGER COLOR WHITE THEME */
.white .burger-inner div {
background-color:var(--black)!important;
} 

/* CHANGE COLOR ON BLACK THEME */
.header.black {
background-color: black;
border-right: 1px solid #383838;
burger: var(--white);
}
/* BURGER COLOR BLACK THEME */
.black .burger-inner div {
background-color:var(--white)!important;
} 


/* MAIN HEADER CLOSED STYLE */
.header {
width: 61px; 
border-right: 1px solid #cbcbcb;
position: fixed;
/*--text: #f4f4f4;
--text-inverse: #333;
  --background: transparent;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;*/
  transition: background 250ms ease-in;
  /*background: var(--background);
  color: var(--text);*/
}



/* === END INTERSECTION === */