如何让固定定位的社交菜单在页脚上方停止（不覆盖页脚）

方法一：CSS固定值方案（适用于Footer高度固定的场景） #

如果你的页脚（#colophon）高度是固定值（比如100px），可以用clamp()函数动态限制菜单的bottom取值范围，既保留原本22px的底部间距，又能在页脚靠近时自动停在上方：

#social{
   transform: rotate(-90deg);
   position: fixed;
   transform-origin: left;
   left: 50px;
   /* clamp(最小值, 自适应值, 最大值)：空间足够时用22px，不足时用「页脚高度+22px」 */
   bottom: clamp(calc(100px + 22px), auto, 22px);
}

把代码里的100px替换成你实际的页脚高度即可。

方法二：JavaScript动态计算方案（适用于Footer高度动态变化的场景） #

如果页脚高度会随内容变化，就需要用JS实时计算位置，动态调整菜单的bottom值：

1. 先修改CSS，移除bottom的硬编码：

#social{
   transform: rotate(-90deg);
   position: fixed;
   transform-origin: left;
   left: 50px;
}

2. 添加JavaScript代码：

const socialMenu = document.getElementById('social');
const footer = document.getElementById('colophon');
const baseGap = 22; // 原本要保留的底部间距

function adjustMenuPos() {
    const footerBottom = footer.getBoundingClientRect().bottom;
    const viewportHeight = window.innerHeight;
    // 计算菜单需要的最小bottom值：确保菜单底部距离页脚顶部至少baseGap
    const minBottom = viewportHeight - footerBottom + baseGap;
    // 取「原间距」和「最小安全间距」的较大值，避免覆盖
    socialMenu.style.bottom = `${Math.max(baseGap, minBottom)}px`;
}

// 页面加载、滚动、窗口 resize 时都更新位置
window.addEventListener('load', adjustMenuPos);
window.addEventListener('scroll', adjustMenuPos);
window.addEventListener('resize', adjustMenuPos);

补充修正（针对旋转后的位置偏差） #

由于菜单用了rotate(-90deg)，视觉位置和元素实际占位有差异，如果出现菜单和页脚间距不对的情况，可以在JS计算时加上菜单自身的高度修正：

const menuHeight = socialMenu.offsetHeight;
const minBottom = viewportHeight - footerBottom + baseGap + menuHeight;

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