我想创建粘性菜单，但它停留在底部。我试图编辑。menu。粘性位置从固定到其他，但它只是停留。唯一的工作位置是固定的，但它只是坚持到屏幕底部。我试图编辑的js，但它甚至没有改变。idk我目前的代码有什么问题

.menu {
    justify-content: space-between;
    align-items: center;
    background-color: #fff;
    position: relative;
    width: 100%;
    padding: 20px;
}

.menu.sticky {
    position: fixed;
    display: flex;
    z-index: 999;
}

.logo {
    display: none;
}

.logo.sticky {
    display: block;
}

nav {
    display: flex;
    justify-content: center;
    align-items: center;
}

nav.sticky .logo {
    display: block;
}

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

nav li {
    margin: 0 30px;
}

nav a {
    color: #333;
    text-decoration: none;
    font-size: 17px;
}

.logo img {
    height: 50px;
    width: auto;
}

nav a:hover {
    color: #ffeb3b;
}

a.offer {
    border-radius: 20px;
    background-color: #ed1f24;
    color: white;
    padding: 10px 20px;
}

a.active {
    background-color: #2196f3;
    color: white;
    padding: 10px 20px;
}

这是我的JS

<script>
    window.onscroll = function() {
        myFunction();
    };

    var navbar = document.getElementById("menu");
    var sticky = menu.offsetTop
    var logo = document.getElementById("logo");

    function myFunction() {
        if (window.pageYOffset >= sticky + 400) {
            logo.style.display = "block";
            navbar.classList.add("sticky");
        } else {
            navbar.classList.remove("sticky");
            logo.style.display = "none";
        }
    }
</script>

这是我的html

<div class="clearfix"></div>
<div class="menu" id="menu">
    <div class="logo" id="logo" style="display:none;">
        <img src="http://www.google.com/intl/en_com/images/logo_plain.png" alt="Logo">
    </div>
    <nav id="navbar">
        <ul id="nav-ul">
            <li><a class="active" href="#home">Home</a></li>
            <li><a href="#about-us">About Us</a></li>
            <li><a href="#tabungan">Tabungan</a></li>
            <li><a href="#kredit">Kredit</a></li>
            <li><a href="#deposito">Deposito</a></li>
            <li><a href="#berita">Berita</a></li>
            <li><a class="offer" href="#pengajuan-kredit">Pengajuan Kredit</a></li>
        </ul>
    </nav>
</div>