固定Navbar-折叠时如何在顶部保持Navbar-Brand静态

Question

使用Bootstrap（v4），我想在移动折叠部分（菜单链接）时将图像/徽标保持在顶部静态。换句话说，当用户向下滚动时，徽标停留在页面顶部，而菜单链接不断下降。

如何实现？我有以下html设置：

<nav class="navbar fixed-top navbar-expand-lg navbar-dark ">

    <div class="container ">
        <a class="navbar-brand" href="index.html" style="margin-bottom: auto;">
        <img src="img/logo.svg"  height="80" alt="Logo">
    </a>

        <!-- icon on phone right -->
        <button class="navbar-toggler blue" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <ion-icon name="menu"></ion-icon>
    </button>

        <!-- links -->
        <div class="collapse navbar-collapse white animated fadeInDown" id="navbarSupportedContent">

            <p>
                <a href="index.html">Home</a>
            </p>
            <p>
                <a href="about.html#about">About Us</a>
            </p>

        </div>
    </div>
</nav>