How do I change my header logo on scroll?

[LR_]

Hi, 

I am struggeling with a question containing the design of my shopify store.

store: https://newindumentis.com/

theme: Symmetry

I have a transparent header that turns white on scroll. My logo is white, I want it to turn black on scroll because of the white header. I already have both versions of the logo (img). How do I do this?

All answers are greatly appreciated! Thanks in advance.

[MooseDesk]

Hi @LR_ ,

Thanks for reaching out to the community. We are MooseDesk, a comprehensive Live Chat, FAQ & Helpdesk App designed to elevate your customer support experience.
Please add the following JavaScript code, it will help you solve your issue.

<script>
    window.onscroll = function() {
        var logo = document.querySelector(".logo__image");
        logo.style.height = "33px"; // logo height
        if (window.pageYOffset > 40) {
            logo.src="https://moosedesk-asset.moosedesk.com/images/logo_moosedesk.png"; // your black logo 
        } else {
            logo.src="//newindumentis.com/cdn/shop/files/New_Indumentis_2.png?v=1722092432&width=400"; // your white logo
        }
    }
</script>

And here is the result: https://jam.dev/c/367c3967-35b5-4461-8d84-78b5f1445389

So this is my answer to your question. If this is helpful for you, please let me know by giving MooseDesk a 'LIKE'. If your question is answered please mark this as 'SOLUTION’.

Once again, keep up the fantastic work, and I wish you the best of luck in the future!