Fixed navigation bar with color

Question

I need my fixed navigation bar to be filled with color when scrolling down. How can I make it transparent at the top, but white when being scrolled?

I'm assuming it can be achieved with Jquery, but I don't have a my experience with it, and the shop is build using shopify which makes it a little complicated when editing the code.

Here's a link to my shop https://h-azeem-london.myshopify.com/

Thanks in advance

Answer 1

Something similar to this with your CSS...

header.main-header {
  position: fixed;
  background-color: white;
}

Then with jQuery...

$(window).on("scroll", function () {
    if ($(this).scrollTop() > 50) {
        $("header").css("background-color","rgba(255, 255, 255, 0.25)");
    }
});