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

Store Design
,
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??