Wie kann ein Element beim Scrollen nach oben am Ende der Seite hängen bleiben?
P粉356361722
P粉356361722 2023-09-06 12:51:37
0
1
448

Was ich erreichen möchte, sieht folgendermaßen aus: https://imgur.com/a/YFcfO3N

Grundsätzlich möchte ich ein Menü am Ende der Seite, das am Ende der Seite hängen bleibt, wenn Sie nach oben scrollen.

P粉356361722
P粉356361722

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

应该是可以的。

Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!