搜索

首页  >  问答  >  正文

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

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

基本上,我想要一个位于页面底部的菜单,当您向上滚动时,它会粘在页面底部。

P粉356361722P粉356361722449 天前483

全部回复(1)我来回复

  • P粉649990163

    P粉6499901632023-09-07 00:40:39

    我刚刚查看了开发者控制台 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
  • 取消回复