Change header features on scroll

Hey guys,

I would like to have my navigation bar (header) change colour on a scroll. I found below .js snippet listening to such an event. I only seem to be able to apply changes to the background colour of the bar and the font colour of the links. I would like to also have my logo and the shopping cart change colours. Any ideas what I need to insert in addition to below?

Thanks!

CSS

#header {
    background-color: rgba(0,0,0,0);
    transition: background-color 500ms ease;
    &.is-scrolled { background-color: white; }
}

header#header.shrink a {
    transition: color 500ms ease;
    color: black;
}

JavaScript

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
    $(window).on("scroll",function(){
        var header = $("#header");
        if ($(window).scrollTop() >= 100) {
            header.addClass("is-scrolled");
        } else {
            header.removeClass("is-scrolled");
        }
    });
</script>

Can you share your website url?

https://bagpipe-bat-sayc.squarespace.com

PW: aqi2024

Awesome thanks @Sam0smith !

How would I apply these injections for only the main page?

In order to target a specific page, you just have to go to the “Website” tab in the Squarespace editor. Once you do that, hover on the page that you’re targetting then click the settings icon of that specific page.

Once you do that, click the advanced tab and paste the following CSS code there:

<style>

.is-scrolled a {
    color: #000 !important;
}

.is-scrolled .icon.icon--cart {
    stroke: #000 !important;
}
.is-scrolled .icon-cart-quantity {
    stroke: #000 !important;
}

</style>

Thanks, I figured I will only be able to "overwrite" the main code in the advanced tabs of the single pages.

I was hoping I don't need to touch the other pages and just make the index page dynamic.