Spotlight theme: transparent header background that turns black for sticky

[Goober1]

In the spotlight theme.

I'm using a color scheme I edited in the theme editor to have a transparent background so that the background image I inserted is visible instead. I'm trying to figure out how to make it so that when a person scrolls down, the sticky header has that background transparency overriden and changed to black. None of the code solutions I've found in the communities here work. Thanks for any help.

[goldi07]

Hello @Goober1 

Got you, You're using the Spotlight theme, and you've set a transparent header background so your background image shows through — but now you want the sticky header to turn black on scroll.

This effect usually involves detecting when the page scrolls and toggling a CSS class on the header. Here's a clean, theme-compatible way to do it:

Step 1: Add a new class for the sticky black header
In your CSS (base.css or wherever you’re styling the header), add:

.header--scrolled {
  background-color: #000 !important;
  transition: background-color 0.3s ease;
}

You can adjust the #000 to any dark shade or even use rgba(0, 0, 0, 0.8) for a soft overlay effect.

Step 2: Add scroll detection JavaScript
You’ll need to inject this in your theme — either in theme.liquid before the </body> tag, or in global.js depending on where your scripts are handled.

<script>
  document.addEventListener('DOMContentLoaded', function () {
    const header = document.querySelector('header.site-header'); // Adjust this selector if needed
    const stickyOffset = 50; // Pixels scrolled before background changes

    if (header) {
      window.addEventListener('scroll', function () {
        if (window.scrollY > stickyOffset) {
          header.classList.add('header--scrolled');
        } else {
          header.classList.remove('header--scrolled');
        }
      });
    }
  });
</script>

Optional: Use data attributes or CSS class already in Spotlight
If Spotlight already uses a data-sticky or is-sticky class when the header becomes sticky, you can target that directly in CSS without JS:

header.is-sticky {
  background-color: #000 !important;
}

To confirm if this class is being added:

1.Right-click on your header in Chrome > Inspect.

2.Scroll the page and see if the header element gains a new class — if it does, use that.

Thank you 😊

[Goober1]

This is great. Thanks. Will try soon.