如何让固定文本随下方背景像素级变色？适配自定义形状场景

核心结论 #

完全可行，不管背景是规则色块还是自定义形状（非水平/垂直边缘），都可以通过CSS实现文本逐像素适配背景颜色，无需依赖JavaScript的滚动位置判断。

实现方法 #

1. 最简单的方案：CSS混合模式（mix-blend-mode）

利用CSS的混合模式，让文本颜色与下方背景色自动计算反差，实现逐像素的颜色适配，同时保证文本可读性。

原理：mix-blend-mode: difference会计算文本颜色与背景色的差值，浅色背景下文本显示深色，深色背景下显示白色，过渡区域会自动平滑变化，完美适配自定义形状背景。

代码示例：

/* 固定文本样式 */
.fixed-text {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 24px;
  font-weight: bold;
  /* 关键属性：混合模式 */
  mix-blend-mode: difference;
  /* 基础色，混合后自动变化 */
  color: white;
  z-index: 100;
}

/* 背景容器样式（保留原有代码，新增自定义形状示例） */
.fp-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  width: 100vw;
}

.fp-container-1 {
  background-color: rgb(255, 255, 255);
}

.fp-container-2 {
  /* 自定义形状背景：斜切双色 */
  background: linear-gradient(45deg, rgb(70, 67, 226) 50%, #fff 50%);
  height: 150vh;
}

2. 进阶精准控制：background-clip:text（适合需自定义颜色映射的场景）

如果需要更精准地控制文本颜色与背景的对应关系（比如指定特定颜色而非自动反差），可以用background-clip: text，将与背景反向的图形/渐变作为文本的背景，裁剪到文本区域。但这种方法需要提前准备与背景匹配的反向素材，相比混合模式更复杂。

你之前的jQuery方案问题分析 #

你之前的JS方案无法实现逐像素效果，是因为它仅通过滚动位置切换文本整体颜色，而非逐像素适配背景。另外代码本身存在两处可能导致失效的问题：

• 选择器错误：$('nav-button')应该是.nav-button（类选择器）或#nav-button（ID选择器），否则无法定位元素；
• 位置计算错误：offset().bottom不是jQuery的合法属性，应该用$('.fp-container-1').offset().top + $('.fp-container-1').height()来计算容器底部位置。

即使修复这些问题，该方案仍无法实现你要的逐像素变色效果，CSS混合模式是更优解。

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