如何实现底部固定的Sticky Menu？代码调试求助

问题描述 #

想要创建固定在底部的粘性菜单，但当前设置仅能让它固定在屏幕底部；尝试修改.menu.sticky的position为非fixed值时，菜单无法正常固定，调整JS代码也无效，不清楚现有代码问题所在。

现有代码问题分析 #

1. JS逻辑匹配顶部粘性菜单：当前JS通过判断滚动距离超过菜单初始位置offsetTop + 400时添加sticky类，这是顶部粘性菜单的触发逻辑，和底部固定的需求完全不匹配。
2. fixed定位缺失关键属性：现有.menu.sticky仅设置了position: fixed，未指定bottom: 0，如果之前能固定在底部是手动加过该属性，但这是始终固定，不是滚动触发的粘性效果。
3. position: sticky使用误区：如果尝试用position: sticky实现底部粘性，需要同时设置bottom: 0，且父容器不能有overflow: hidden/scroll等属性，否则sticky会失效。

修复方案 #

以下提供两种符合需求的实现方式：

方式1：滚动到页面底部时固定在屏幕底部（JS + fixed） #

页面滚动到接近底部时，菜单切换为固定在底部，否则保持原位置。

修改后的CSS

.menu {
    justify-content: space-between;
    align-items: center;
    background-color: #fff;
    position: relative;
    width: 100%;
    padding: 20px;
    margin-bottom: 20px;
}

.menu.sticky {
    position: fixed;
    display: flex;
    z-index: 999;
    bottom: 0;
    left: 0;
    right: 0;
    box-shadow: 0 -2px 8px rgba(0,0,0,0.1);
}

.logo {
    display: none;
}

.logo.sticky {
    display: block;
}

nav {
    display: flex;
    justify-content: center;
    align-items: center;
}

nav ul {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
}

nav li {
    margin: 0 30px;
}

nav a {
    color: #333;
    text-decoration: none;
    font-size: 17px;
}

.logo img {
    height: 50px;
    width: auto;
}

nav a:hover {
    color: #ffeb3b;
}

a.offer {
    border-radius: 20px;
    background-color: #ed1f24;
    color: white;
    padding: 10px 20px;
}

a.active {
    background-color: #2196f3;
    color: white;
    padding: 10px 20px;
}

修改后的JS

window.onscroll = function() {
    myFunction();
};

var navbar = document.getElementById("menu");
var logo = document.getElementById("logo");

function myFunction() {
    // 计算页面滚动到底部的触发阈值
    var scrollThreshold = document.documentElement.scrollHeight - window.innerHeight - 200;
    if (window.pageYOffset >= scrollThreshold) {
        logo.style.display = "block";
        navbar.classList.add("sticky");
    } else {
        navbar.classList.remove("sticky");
        logo.style.display = "none";
    }
}

方式2：使用position: sticky实现始终固定在底部（无需JS） #

如果需求是菜单始终固定在屏幕底部，滚动时不会消失，可直接用sticky定位：

修改后的CSS

.menu {
    justify-content: space-between;
    align-items: center;
    background-color: #fff;
    position: sticky;
    bottom: 0;
    width: 100%;
    padding: 20px;
    z-index: 999;
    display: flex;
}

.logo {
    display: block;
}

nav {
    display: flex;
    justify-content: center;
    align-items: center;
}

nav ul {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
}

nav li {
    margin: 0 30px;
}

nav a {
    color: #333;
    text-decoration: none;
    font-size: 17px;
}

.logo img {
    height: 50px;
    width: auto;
}

nav a:hover {
    color: #ffeb3b;
}

a.offer {
    border-radius: 20px;
    background-color: #ed1f24;
    color: white;
    padding: 10px 20px;
}

a.active {
    background-color: #2196f3;
    color: white;
    padding: 10px 20px;
}

说明

使用position: sticky时，需确保菜单的父容器（如body）未设置overflow: hidden或overflow: scroll，否则sticky定位会失效。

内容的提问来源于stack exchange，提问作者zawkey