如何仅在页面滚动到底部时为固定Cookie栏添加底部外边距

你可以通过JavaScript监听滚动事件，结合CSS类切换的方式实现需求——只有当页面滚动到底部时，才给Cookie区块添加margin-bottom，初始状态保持原样。

步骤1：修改CSS，新增状态类 #

先给Cookie区块新增一个专门的类，用来定义滚动到底部时的样式，同时可以添加过渡动画让效果更平滑：

#cookie-section {
    min-height: 50px;
    width: 100%;
    position: fixed;
    display: flex;
    bottom: 0;
    background-color: rgba(38, 38, 38, 0.9);
    transition: margin-bottom 0.3s ease; /* 可选，添加平滑过渡效果 */
}

/* 滚动到底部时添加的类 */
#cookie-section.bottom-margin {
    margin-bottom: 50px;
}

步骤2：添加滚动监听逻辑 #

通过JavaScript监听页面滚动事件，实时判断是否到达页面底部，动态添加/移除上面定义的类：

const cookieSection = document.getElementById('cookie-section');

// 监听滚动事件
window.addEventListener('scroll', () => {
    // 计算页面总高度、当前视口高度、已滚动距离
    const totalPageHeight = document.documentElement.scrollHeight;
    const viewportHeight = window.innerHeight;
    const scrolledDistance = window.pageYOffset || document.documentElement.scrollTop;

    // 判断是否接近页面底部（预留10px误差，适配不同浏览器的计算差异）
    if (scrolledDistance + viewportHeight >= totalPageHeight - 10) {
        cookieSection.classList.add('bottom-margin');
    } else {
        cookieSection.classList.remove('bottom-margin');
    }
});

可选优化：添加防抖函数 #

如果担心滚动事件触发过于频繁影响性能，可以用防抖函数减少事件执行次数：

// 防抖函数：指定时间内只执行一次回调
function debounce(callback, delay = 100) {
    let timeoutId;
    return function() {
        clearTimeout(timeoutId);
        timeoutId = setTimeout(() => callback.apply(this, arguments), delay);
    };
}

// 用防抖包裹滚动处理逻辑
window.addEventListener('scroll', debounce(() => {
    const totalPageHeight = document.documentElement.scrollHeight;
    const viewportHeight = window.innerHeight;
    const scrolledDistance = window.pageYOffset || document.documentElement.scrollTop;

    if (scrolledDistance + viewportHeight >= totalPageHeight - 10) {
        cookieSection.classList.add('bottom-margin');
    } else {
        cookieSection.classList.remove('bottom-margin');
    }
}));

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