粘性导航栏mix-blend-mode：滚动时仅与区块背景色混合

核心思路是把每个区块的背景单独分离成一个下层元素，让导航栏只和这些背景层混合，同时把区块内的文本、图片等内容放在导航栏的上层，避免被混合。

步骤1：调整HTML结构 #

给每个内容区块添加容器，将背景层和内容层拆分：

<div class="section-wrapper">
  <div class="section-bg"></div>
  <div class="section-content">
    <!-- 原区块的文本、图片等内容 -->
  </div>
</div>

步骤2：修改CSS样式 #

• 导航栏保留混合模式，设置层级为1：

nav {
  position: fixed;
  top: 0;
  width: 100%;
  padding: 1rem;
  mix-blend-mode: difference;
  z-index: 1;
  color: white;
}

• 区块容器设为相对定位，锁定内部元素的堆叠上下文：

.section-wrapper {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
}

• 背景层绝对定位铺满容器，层级设为0（低于导航栏），赋予原区块的背景色：

.section-bg {
  position: absolute;
  inset: 0;
  background-color: #对应区块的背景色; /* 比如第一个区块用#ff4444，第二个用#44ff44 */
  z-index: 0;
}

• 内容层设为相对定位，层级设为2（高于导航栏），确保内容不参与混合：

.section-content {
  position: relative;
  z-index: 2;
  padding: 2rem;
}

为什么之前的方法无效？ #

isolation: isolate作用是隔离子元素与外部的混合，但你的导航栏是fixed定位，属于根堆叠上下文，和区块的堆叠上下文相互独立。单纯调整z-index没分离背景与内容的话，导航栏依然会和下方所有可见元素（包括文本、图片）混合，必须通过分层拆分背景和内容才能实现需求。

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