Bagaimana untuk membuat elemen melekat pada bahagian bawah halaman semasa menatal ke atas?

Question

Apa yang saya cuba capai kelihatan seperti ini: https://imgur.com/a/YFcfO3N

Pada asasnya, saya mahukan menu di bahagian bawah halaman yang melekat pada bahagian bawah halaman apabila anda menatal ke atas.

Answer 1

Saya baru sahaja menyemak konsol pembangun https://imgur.com/a/YFcfO3N a> Nampaknya mereka menggunakan bekas pengaki dengan kelas "Pembungkus pengaki", dengan sifat CSS berikut:

.Footer-wrapper {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 3;
}

Apabila menatal ke bawah, kelas lain ditambahkan pada bekas, "bawah":

.down {
    bottom: -60px;
}

Kedudukan negatif mestilah sepadan dengan ketinggian pengaki/menu.

Saya rasa mereka melakukan ini menggunakan JavaScript. Anda boleh menyemak sama ada pengguna berada di bahagian atas halaman dalam JavaScript seperti ini:

let userIsAtTheTopOfThePage = window.pageYOffset === 0;

Kelas boleh ditambah kepada elemen seperti ini:

element.classList.add("my-class");

dan padam seperti ini:

element.classList.remove("my-class");

EDIT: Maaf, saya salah faham soalan dahulu, tetapi apa yang anda ingin capai boleh dicapai dengan cara yang sama. Jom lihat contoh menu ini:

<nav id="menu">
    <ul>
        <li>Menu item 1</li>
        <li>Menu item 2</li>
        <li>Menu item 3</li>
        <!-- Add more menu items here -->
    </ul>
</nav>

Gunakan CSS ini

#menu {
    position: fixed;
    bottom: 0;
    left: 0;
}
.scrolling-menu {
    position: static !important;
}

dan JavaScript ini

document.addEventListener("DOMContentLoaded", function() {
    window.addEventListener("scroll", function() {
        var menu = document.getElementById("menu");
        var scrollPosition = window.scrollY;
        var windowHeight = window.innerHeight;
        var documentHeight = document.body.offsetHeight;
        var scrollThreshold = documentHeight - windowHeight - 200; // Adjust this value to determine when the menu should become part of the flow

        if (scrollPosition > scrollThreshold) {
            menu.classList.add("scrolling-menu");
        } else {
            menu.classList.remove("scrolling-menu");
        }
    });
});

Sepatutnya boleh.