Sticky Menu stick to bottom instead the top

I want to create sticky menu but it stay at the bottom. I tried to edit the .menu.sticky position from fixed to other but it just stay. the only position that working is on fixed but it just stick to the bottom of the screen. I tried to edit the js but its not even change. idk what is wrong with my current code

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

and here is my 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>

and this is my 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>

>Solution :

You can change the position property of the .menu.sticky class to absolute. To make the menu stay at the bottom, add the following properties to the same class: bottom: 0, left: 0, right: 0.

updated CSS for you:

.menu.sticky {
position: absolute;
bottom: 0;
left: 0;
right: 0;
display: flex;
z-index: 999;
}