我想要完成的事情如下所示:https://imgur.com/a/YFcfO3N
基本上,我想要一个位于页面底部的菜单,当您向上滚动时,它会粘在页面底部。
P粉6499901632023-09-07 00:40:39
我刚刚查看了开发者控制台 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"); } }); });
应该是可以的。