Bagaimana untuk membuat elemen melekat pada bahagian bawah halaman semasa menatal ke atas?
P粉356361722
P粉356361722 2023-09-06 12:51:37
0
1
446

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.

P粉356361722
P粉356361722

membalas semua(1)
P粉649990163

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.

Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina:Latihan PHP dalam talian kebajikan awam,Bantu pelajar PHP berkembang dengan cepat!