Out of the Sandbox Flex Theme Header Change colour on Scroll

[lcameron]

Hi. I have had to manually code the header in the Flex theme to stay sticky as the inbuilt sticky option changes the header completely into a hamburger menu which customer doesnt want. So after coding the header to stay sticky - this works great on all the content/product pages etc as the header on those pages is white, but on the home page the header is overlay the image below. Does anyone have a way in the Flex theme to change the header background colour to white once it scrolls?

[DaisyVo]

Hi @lcameron 
Thank you for reaching out to the Shopify community. I'd be glad to assist you. Could you kindly share your store URL and password (if it’s password-protected) so I can review it and provide you with an update?

[lcameron]

Thank you. URL is https://aribella.com.au/

[DaisyVo]

Hi @lcameron 

Add this code above the </body> tag, in the theme.liquid file
https://prnt.sc/9W1BEGOaZy6H

{% if template.name == "index" %}
  <script>
  function scrolled(){
      if (window.scrollY > 10 ) {
        let dom = document.querySelector('header#header')
        if (dom) {
          dom.classList.add("header-scroll")
        }
      }else{
        let dom = document.querySelector('header#header')
        if (dom) {
          dom.classList.remove("header-scroll")
        }
      }
  }
  window.onscroll = scrolled;
  </script>
  {% style %}
    header#header {
        background: white !important;
    }
    header#header * {
        color: black !important;
    }
    a.header__logo.header__link.overlay-logo .image-element__wrap > img {
        filter: brightness(0) !important;
    }
  {% endstyle %}
{% endif %}

Please let me know if it works. Thank you!Best,
Daisy - Avada Support Team

[lcameron]

Hi, sorry didn't work - the background is white as soon as page loads, not just when it scrolls?