CODEWITHSUNDEEP
jqueryscrollnavigation
Emile
Emile

Reputation: 1

Fixed navigation bar with color

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

Upvotes: 0

Views: 53

Answers (1)

Jon Lambson
Jon Lambson

Reputation: 510

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)");
    }
});

Upvotes: 3

Related Questions