滚动时如何在徽标导航栏中交换img

Question

因此，我在网站顶部的中央有导航栏。左边有徽标，右边有几个菜单项。我想在滚动时使徽标进入导航栏，并希望将徽标替换为简单的菜单jpg。我怎样才能做到这一点 ？你有什么建议吗？我也可以在滚动时更改导航栏背景的宽度吗？我希望它的全宽为700px，居中。

这是工作代码：

$(window).on('scroll', function() {
    if ($(window).scrollTop()) {
        $('nav').addClass('shrink');
    } else {
        $('nav').removeClass('shrink');
    }
})

.background {
    background-image: url('../images/img1-header.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    height: 650px;
    width: 100%;
    padding: 1em 0 3em;
}

#siteNav {
    width: 100%;
    top: 0;
    left: 0;
    transition: 0.3s;
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.shrink {
    background-color: rgba(0, 0, 0, 0.8);
    position: fixed;
    height: 60px;
}

.shrink #siteNav .logo {
    padding: 10px;
    transition: 0.3s;
    display: flex;
}

#siteNav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
}

#siteNav ul li {
    list-style: none;
    border-right: 1px solid #383838;
    padding-top: 20px;
}

#siteNav ul li a {
    padding: 0 30px;
    text-decoration: none;
    transition: 0.3s;
    color: #ffffff;
}

#siteNav ul li:last-child {
    border-right: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="background">
            <nav id="siteNav">
                <img class="logo" src="images/img2-logo.png" alt="">
                <ul>
                    <li><a href="#mission">MISSION</a></li>
                    <li><a href="#clients">CLIENTS</a></li>
                    <li><a href="#products">PRODUCTS</a></li>
                    <li><a href="#contact">CONTACT</a></li>
                </ul>
            </nav>
            <!--header-->

            <header>
                <div>
                    <h1>PRAKTYKI <br><a>INFINITY-GROUP</a></br>
                    </h1>
                </div>
            </header>
        </div>