Make header transparent and change text / icon color when scrolling down

[abmhr]

Hi all!

I couldn't find anything for the following problem regard I have:

I'm using the Origin theme and have a header which is fixed. But I don't want the header to be shown when scrolling down. So I though: what if the header shifts from a color fill to transparent. In this matter the text color and icon (cart, menue etc.) needs also to change.

I only found solutions for making a transparent header solid but this does not quite work for me. 

Maybe you can help!

Thank you!

[TheUntechnickle]

Hey there,

To achieve the effect you're describing with the Origin theme in Shopify, where the header becomes transparent and the text/icons change color when scrolling down, you'll need to use a combination of CSS and JavaScript. Here's a solution that should work for you:

Here's how this solution works:

1. The JavaScript code adds an event listener for scrolling.
2. When the page is scrolled beyond the header's height, it adds a class 'header-transparent' to the header.
3. The CSS then changes the background to transparent and adjusts text/icon colors when this class is present.

To implement this:

1. Add the JavaScript code to your theme.liquid file or a separate JS file that's included in your theme.
2. Add the CSS to your base.css file in your theme.
3. Adjust the colors and selectors as needed to match your theme's specific structure and design.

You may need to fine-tune the selectors and styles to perfectly match your theme's structure. Also, ensure that your header has a high z-index so it remains on top of other elements when transparent.

Feel free to reach out if you want us to implement this. Happy to help 🙂
Shubham | Untechnickle

// Add this JavaScript to your theme.liquid or a separate JS file
document.addEventListener('DOMContentLoaded', function() {
  var header = document.querySelector('header'); // Adjust selector if needed
  var headerHeight = header.offsetHeight;

  function updateHeaderStyle() {
    if (window.pageYOffset > headerHeight) {
      header.classList.add('header-transparent');
    } else {
      header.classList.remove('header-transparent');
    }
  }

  window.addEventListener('scroll', updateHeaderStyle);
  updateHeaderStyle(); // Run once on page load
});

// Add this CSS to your theme's stylesheet
header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background-color: #your-solid-color; /* Replace with your desired solid color */
  color: #your-text-color; /* Replace with your desired text color */
  transition: background-color 0.3s ease, color 0.3s ease;
}

.header-transparent {
  background-color: transparent;
  color: #your-scroll-text-color; /* Replace with your desired text color when scrolled */
}

/* Adjust icon colors */
header svg, header img {
  fill: currentColor; /* This will make SVG icons inherit the current text color */
}

/* If you have specific classes for cart, menu icons, etc., target them like this: */
.header-transparent .cart-icon,
.header-transparent .menu-icon {
  color: #your-scroll-icon-color; /* Replace with your desired icon color when scrolled */
}