如何防止fixed定位的侧边栏滚动时覆盖页脚或指定元素？

你之前尝试切换fixed和absolute定位的思路很难走通，核心原因是项目内大量嵌套的position: relative元素，会成为absolute定位的参考基准，导致定位计算完全偏离预期，没必要在这个方向继续调整。

低改造成本的实现路径 #

• 全程不修改侧边栏的position: fixed属性：fixed定位的参考系是视口，完全不受外层relative父元素的定位上下文干扰，从根源上绕开你之前遇到的absolute定位失效问题
• 动态钳制侧边栏的可用高度：
  1. 配合带节流的滚动监听，实时获取三个视口坐标值：侧边栏距视口顶部的偏移量、页脚元素距视口顶部的位置、侧边栏自身的内容高度
  2. 给侧边栏设置动态最大高度：max-height = 页脚距视口顶部的距离 - 侧边栏距视口顶部的距离 - 20px预留安全间距
  3. 当计算出的最大高度小于侧边栏内容高度时，侧边栏会在内部触发滚动，底部永远不会越过页脚顶部边界，不会出现遮挡
• 如果是页脚高度固定的场景，可以直接用纯CSS实现，不需要写JS：保留fixed定位的基础上，直接给侧边栏加max-height: calc(100vh - 顶部偏移值 - 页脚固定高度 - 安全间距)，侧边栏内容超过高度时会自动内部滚动，代码量极少。

避坑提示 #

• 不要为了适配absolute定位去调整全项目的relative嵌套结构：除非给整个页面的最外层根容器设置独立的position: relative，打断所有内层relative的定位上下文，否则侧边栏的absolute定位基准会不断跳转到最近的relative父元素，位置会完全错乱，改造成本远高于动态高度钳制的方案。

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