Transparent header to solid header upon scroll

Shopify Discussion
1

I am working with the Origin theme and while I have already got the transparent header in, I am trying to get it to turn solid while and have the writing turn a different colour when you scroll down on the interface. Does anyone know how to do this? or where I can find the code for this?

My homepage header currently looks like this:

Screen Shot 2024-01-22 at 3.13.53 PM.png
Screen Shot 2024-01-22 at 3.13.53 PM.png1417×765 166 KB

However I want the header (the part shown in the black rectangle in the image below) to turn white and the writing to turn green upon scroll…

Screen Shot 2024-01-22 at 3.16.25 PM.png
Screen Shot 2024-01-22 at 3.16.25 PM.png1406×764 221 KB

2

Hi @ninachin

You can try it with the following quick changes. For example, first, you add some JavaScript

window.onscroll = function() {isSticky()};

var header = document.querySelector("sticky-header");
var sticky = header.offsetTop;

function isSticky() {
  if (window.pageYOffset > sticky) {
    header.classList.add("sticky");
  } else {
    header.classList.remove("sticky");
  }
}

This is a simple code but there could be better ways. It just adds a “sticky” class to sticky-header element. With that, you can style it with some CSS:

sticky-header {
    transition: background 0.5s ease-in-out;
}

sticky-header.sticky {
    background: #fff;
    transition: background 0.5s ease-in-out;
}

sticky-header.sticky .header__heading-link .h2 {
    color: #78863d;
}

sticky-header.sticky nav li a {
    color: #78863d;
}

sticky-header.sticky .header__search svg {
    color: #78863d;
}

Just one suggestion, you can probably do it in multiple ways.