القائمة تلتصق بالجزء السفلي بدلا من القمة css

أريد إنشاء قائمة لكنها تبقى في الأسفل. حاولت تعديل موضع .menu.sticky من fixed إلى آخر ولكنه يبقى كما هو. الموضع الوحيد الذي يعمل فيه fixed ولكنه يظهر فقط بأسفل الشاشة. حاولت تعديل كود js لكن لم يتغير . هذا هو الكود

.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;
}

كود جافاسكربت

<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>

ارجو منكم مساعدتي