Jump to content

Intersectional Observer Navigation Help

Recommended Posts

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

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



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.

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:

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

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

let prevYPosition = 0
let direction = 'up'

const sectionOneObserver = new IntersectionObserver(function(
) {
  entries.forEach(entry => {
    if (!entry.isIntersecting) {
    } else {



Link to comment
  • Replies 0
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Create an account or sign in to comment

You need to be a member in order to leave a comment

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.