javascript 如何使元素在向上滚动时粘在页面底部？

g6ll5ycj 于 2023-06-28 发布在 Java

关注(0)|答案(2)|浏览(109)

我想做的事情如下所示：https://imgur.com/a/YFcfO3N
基本上我想一个菜单，坐在页面的底部，当你向上滚动它粘在页面的底部。

来源：https://stackoverflow.com/questions/76560932/how-can-i-make-an-element-stick-to-the-bottom-of-the-page-when-scrolling-up

2条答案

按热度按时间

j5fpnvbx1#

我刚刚在https://imgur.com/a/YFcfO3N的开发人员控制台中看了一下，似乎他们使用了一个带有类“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");
        }
    });
});

应该可以。

赞(0）回复(0）举报 2023-06-28

n1bvdmb62#

要将菜单保持在页面底部并在向上滚动时保持不变，可以将菜单位置设置为position: sticky;
下面是更新后的示例代码

<!DOCTYPE html>
<html>

<head>
    <title>Sticky Bottom Menu</title>
    <style>
        .content {
            position: relative;
        }
        #bottom-menu {
            position: sticky; /*this will fix the menu position*/
            bottom: 25px; /*this will give the menu offset from bottom position when menu is sticky*/
            height: 50px;
            background-color: #DDD;
            border-radius: 5px;
            margin-left: 30%;
            margin-right: 30%;
        }
        footer {
            height: 200px;
            background: #555;
            margin-top: 25px; /* this margin will work when sticky nav becomes static*/
        }
    </style>
</head>

<body>
    <div class="content">
        <p>text...</p>
        <p>text...</p><p>text...</p><p>text...</p><p>text...</p><p>text...</p><p>text...</p><p>text...</p><p>text...</p><p>text...</p><p>text...</p><p>text...</p><p>text...</p><p>text...</p><p>text...</p><p>text...</p><p>text...</p><p>text...</p><p>text...</p><p>text...</p><p>text...</p><p>text...</p><p>text...</p><p>text...</p><p>text...</p><p>text...</p><p>text...</p><p>text...</p><p>text...</p><p>text...</p><p>text...</p><p>text...</p><p>text...</p><p>text...</p><p>text...</p><p>text...</p>
        <nav id="bottom-menu">
            <!-- Menu items go here -->
        </nav>
    </div>

    <footer></footer>

   
</body>

</html>

在更新后的代码中，我将菜单放在了滚动内容的底部，所以它将浮动在底部，直到滚动位置到达内容的底部
希望这符合你的要求！

赞(0）回复(0）举报 2023-06-28

我来回答

javascript 如何使元素在向上滚动时粘在页面底部？

2条答案

相关问题

热门标签

最新问答