How to make header transparent and then solid when scroll past image on dawn theme

Store Design
,

Topic summary

A user seeks to create a transparent header that becomes solid when scrolling past an image on the Dawn theme.

Solutions Provided:

Multiple respondents offer similar approaches:

  • Add custom CSS to make the header initially transparent with a transition effect
  • Implement JavaScript/jQuery to detect scroll position and change header background color accordingly
  • One user shares a CodePen example demonstrating the technique

Technical Implementation:

The solution involves:

  1. Editing theme.scss.liquid to add CSS for transparent header with rgba(0,0,0,0) and transition properties
  2. Adding JavaScript code that monitors scroll position and switches between transparent and solid background colors when scrolling exceeds 100 pixels

Current Status:

The original poster asks a follow-up question about where to place the JavaScript code, indicating the discussion remains open with implementation details still being clarified.

Summarized with AI on November 16. AI used: claude-sonnet-4-5-20250929.
1

hello!

Wondering if someone can help me im wanting to make my header transparent and then turn to the solid colour when i scroll.

Is this possible?

www.andiacollective.com.au

2

Hi @Andia

First of all have to add a class for header on scroll.

Then have to write the css accordingly.

this can be done usning the custom css and js code.

3

@Andia

You can check this link

https://codepen.io/maani/pen/Aqpagr

4

Hello @Andia ,

You can try to follow these steps:

Go to Online Store → Themes → Actions → Edit code

Go to theme.scss.liquid file → Add this following code at the bottom of page

.site-header {
   background-color: rgba(0, 0, 0, 0);
   transition: background-color 0.3s ease;
}

Add this Javascript code

$(document).ready(function() {
   var header = $(".site-header");
   $(window).scroll(function() {
      var scroll = $(window).scrollTop();
      if (scroll > 100) {
         header.css("background-color", "your-solid-color-hex-code");
      } else {
         header.css("background-color", "rgba(0, 0, 0, 0)");
      }
   });
});

Save and preview

Hope this can help.

Ali Reviews team.

5

where does the javascript go??