How can I create a transparent homepage header that turns white when scrolling?

[Marco211]

Hi all, do you know how to make the header of my website only in homepage transparent and then when it goes down white? Thanks a lot to everyone

https://refade-8966.myshopify.com/

password: refade

[webwondersco · Accepted solution]

@Marco211 , Please add the below line CSS and Js at theme.liquid file. just before the ending of </body> tag.

{% if template == 'index' %}
<style>
.header {
  position: fixed;
  top: 40px;
  left: 0;
  width: 100%;
  z-index: 999;
  transition: background-color 0.3s ease;
}

.header.transparent {
  background-color: transparent;
}

.header.white {
  background-color: #ffffff;
top:0;
}

</style>
<script>
document.addEventListener('DOMContentLoaded', function() {
  var header = document.querySelector('.header');
  header.classList.add('transparent');
});

// Change header background on scroll
window.addEventListener('scroll', function() {
  var header = document.querySelector('.header');
  var scrollTop = window.pageYOffset || document.documentElement.scrollTop;

  if (scrollTop > 0) {
    header.classList.remove('transparent');
    header.classList.add('white');
  } else {
    header.classList.remove('white');
    header.classList.add('transparent');
  }
});
</script>
{% endif %}

[ThompsonLane]

Hello!

I am hoping to achieve this same effect on my site but not having any luck with the above code. I'd love some help if possible? 🙂

URL: www.thompsonlane.com.au

Template: Split

PW: siteloading