如何使元素在向上滾動時粘在頁面底部?
P粉356361722
P粉356361722 2023-09-06 12:51:37
0
1
426

我想要完成的事情如下所示:https://imgur.com/a/YFcfO3N

基本上,我想要一個位於頁面底部的選單,當您向上捲動時,它會黏在頁面底部。

P粉356361722
P粉356361722

全部回覆(1)
P粉649990163

我剛剛查看了開發者控制台https://imgur.com/a/YFcfO3N a> 看起來,他們使用帶有「Footer-wrapper」類別的頁腳容器,並具有以下CSS屬性:

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

向下捲動時,容器中加入了另一個類,「down」:

.down {
    bottom: -60px;
}

負位置必須對應於頁尾/選單的高度。

我認為,他們是用 JavaScript 來做到這一點的。您可以在 JavaScript 中檢查使用者是否位於頁面頂部,如下所示:

let userIsAtTheTopOfThePage = window.pageYOffset === 0;

可以像這樣將類別加入元素:

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

並這樣刪除:

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

編輯:抱歉,我首先誤解了這個問題,但是您想要實現的目標可以透過類似的方式實現。讓我們來看看這個範例選單:

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

使用這個CSS

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

和這個 JavaScript

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");
        }
    });
});

應該是可以的。

熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!