实现固定菜单与页脚重叠时字体颜色切换的方案

先修正基础代码错误 #

你的HTML存在标签闭合和属性语法问题，CSS选择器与HTML元素ID不匹配，先修正如下：

<div class="container">
  <nav>
    <ul id="fixed">
      <li><a href="#">Menu item</a></li>
      <li><a href="#">Menu item</a></li>
      <li><a href="#">Menu item</a></li>
    </ul>
  </nav>
</div>
<footer id="mainfooter"></footer>

#fixed {
  position: fixed; /* 用fixed实现屏幕固定定位，而非absolute */
  left: 10px;
  bottom: 10px;
  list-style: none;
  padding: 0;
}

#fixed a {
  color: #fff; /* 默认白色文字 */
  text-decoration: none;
}

#mainfooter {
  background: #fff;
  height: 200px; /* 示例高度，根据实际需求调整 */
  margin-top: 800px; /* 示例间距，模拟滚动后重叠场景 */
}

方案一：纯CSS实现（修正mix-blend-mode用法） #

之前mix-blend-mode未生效，大概率是缺少必要的布局上下文，调整后即可实现需求：

#fixed {
  position: fixed;
  left: 10px;
  bottom: 10px;
  list-style: none;
  padding: 0;
}

#fixed a {
  color: #fff;
  text-decoration: none;
  padding: 4px 8px; /* 扩大交互区域，确保混合模式生效范围完整 */
  mix-blend-mode: difference; /* 白色文字在白色背景上自动转为深色 */
}

#mainfooter {
  background: #fff;
  height: 200px;
  margin-top: 800px;
}

mix-blend-mode: difference会让白色文字在白色背景上呈现黑色，若需要严格的#333，可将页脚背景调整为#f0f0f0这类浅灰，或搭配filter: brightness(0.3)微调文字深浅。

方案二：JavaScript精准控制颜色 #

如果需要严格匹配#333的颜色要求，可通过JS监听元素重叠状态，动态切换文字颜色：

#fixed {
  position: fixed;
  left: 10px;
  bottom: 10px;
  list-style: none;
  padding: 0;
}

#fixed a {
  color: #fff;
  text-decoration: none;
  padding: 4px 8px;
}

#fixed a.dark-text {
  color: #333; /* 重叠时的目标颜色 */
}

#mainfooter {
  background: #fff;
  height: 200px;
  margin-top: 800px;
}

const fixedMenu = document.getElementById('fixed');
const footer = document.getElementById('mainfooter');

function checkOverlap() {
  const menuRect = fixedMenu.getBoundingClientRect();
  const footerRect = footer.getBoundingClientRect();

  // 检测两个元素是否存在重叠区域
  const isOverlapping = !(
    menuRect.bottom < footerRect.top ||
    menuRect.top > footerRect.bottom ||
    menuRect.right < footerRect.left ||
    menuRect.left > footerRect.right
  );

  // 给所有链接切换深色类
  fixedMenu.querySelectorAll('a').forEach(link => {
    link.classList.toggle('dark-text', isOverlapping);
  });
}

// 初始化检测
checkOverlap();
// 滚动和窗口 resize 时重新检测
window.addEventListener('scroll', checkOverlap);
window.addEventListener('resize', checkOverlap);

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