Change Sticky Header from Transparent to White when scrolling

Shopify Discussion
1

I am using the Debut theme and have customized my header to be transparent and sticky. I have also made the header change colour when someone hovers over it. I want the background colour of the header to switch to white when the page scrolls.

I have tried adding some javascript to the theme.js file but so far it has not worked for me. I am wondering if I can get some help debugging my code.

My site url is: https://naeem-gifts-co.myshopify.com/ and the password is: mompew

This is the CSS I added:

.site-header .headerscroll {
  background-color: white;
}

And here is the javascript:

$(function() {
    $(window).on("scroll", function() {
        if($(window).scrollTop() > 50) {
          $(".site-header").addClass("headerscroll");
        } else {
            //remove the background property so it comes transparent again (defined in your css)
          $(".site-header").removeClass("headerscroll");
        }
    });
});
2

Hello @Naeem3
I would like to give you the recommendation to support you so kindly follow steps below:

  1. Go to your Online store > Themes > Edit code
  2. Open your theme.liquid file
  3. Paste the below code before

I hope the above is useful to you.
Best regards,
GemPages Support Team