jamesperet-website-2020/themes/james-theme/layout/_partial/fixed-logo.ejs

<div id="logo" class="dropright">
    <button unselectable="on" class="logo-button noselect" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        <img  class="hide-if-sm" src="/images/james-logo-white.svg">
    </button>
    <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
        <a class="dropdown-item" href="/">Home</a>
        <a class="dropdown-item" href="/projects">Projects</a>
        <a class="dropdown-item" href="/blog">Blog</a>
    </div>
</div>

<script>
    var logo = document.getElementById('logo');
    var cover = document.getElementById('cover')
    var invertLogo = function(){
        console.log(window.scrollY + "/" + cover.clientHeight)
        if(window.scrollY >= cover.clientHeight) {
            logo.classList.add("invert");
        }
        else if(window.scrollY < cover.clientHeight) {
            logo.classList.remove("invert");
        }
    }
    invertLogo()
    window.onscroll = function(){
        invertLogo();
    };
    
</script>