Jump to content


  • Posts

  • Joined

  • Last visited

Everything posted by ryanewan

  1. 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>
  2. 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 === */
  3. 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); }
  4. Site URL: http://www.ryanewanchuk.com Password: SquarespaceDemoHelp!
  5. 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?
  • 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.