sticky定位的SVG logo滚动经过div时如何实现颜色切换

最优实现方案推荐 #

根据你的需求（sticky定位Logo、经过指定div时从白切橙色），优先推荐两种方案，按优先级排序：

方案1：纯CSS滚动驱动动画（首选，无JS性能开销） #

该方案不需要写任何JS代码，仅靠原生CSS即可实现精准的颜色切换效果，目前全球浏览器兼容性已覆盖92%以上用户，是当前的最优解。

实现步骤：

1. 首先将SVG内联写入HTML代码（方便直接控制填充色，如果是img引入的SVG可以用mask方案改造，后面会提）
2. 基础CSS配置：

.site-logo {
  position: sticky;
  top: 20px; /* 替换为你的sticky定位距离 */
  fill: #ffffff; /* 初始白色 */
  z-index: 10;
  transition: fill 0.2s ease; /* 可选，加过渡动画更顺滑 */
  /* 绑定滚动时间线 */
  animation: logoColorSwitch linear both;
  animation-timeline: scroll(root);
  /* 调整滚动触发区间，和你背景色切换的滚动位置对齐 */
  animation-range: 100px 200px;
}

/* 颜色切换动画 */
@keyframes logoColorSwitch {
  to {
    fill: #ff7f00; /* 替换为你的目标橙色 */
  }
}

3. 如果需要精准绑定到某个特定div的显示区域触发变色，可以给对应div添加view时间线：

/* 要触发变色的白色背景div */
.white-bg-block {
  view-timeline: --whiteBlock block;
}
/* 给logo修改动画时间线绑定 */
.site-logo {
  animation-timeline: --whiteBlock;
  animation-range: entry 10% cover 30%; /* 调整触发时机 */
}

方案2：Intersection Observer JS方案（全兼容，适配老浏览器） #

如果需要兼容IE、2022年以前的老旧移动端浏览器，可以用该方案，JS代码量极少，性能开销极低。

实现步骤：

1. 先写基础CSS和变色类：

.site-logo {
  position: sticky;
  top: 20px;
  fill: #ffffff;
  z-index: 10;
  transition: fill 0.2s ease;
}
/* 橙色状态类 */
.site-logo.orange {
  fill: #ff7f00;
}

2. 添加JS监听逻辑：

const logoEl = document.querySelector('.site-logo');
const triggerBlock = document.querySelector('.white-bg-block'); // 触发变色的对应div

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    // 当div进入视口对应位置时切换类
    entry.isIntersecting ? logoEl.classList.add('orange') : logoEl.classList.remove('orange');
  })
}, {
  // 调整rootMargin匹配logo的sticky位置，保证触发时机精准
  rootMargin: '-20px 0px 0px 0px',
  threshold: 0
})

observer.observe(triggerBlock);

额外注意事项 #

如果你的SVG是通过<img>标签引入的，无法直接修改fill属性，可以用CSS mask改造，两种方案都适用：

.site-logo {
  width: 120px; /* 你的logo宽度 */
  height: 40px; /* 你的logo高度 */
  mask: url('你的logo.svg路径') no-repeat center / contain;
  -webkit-mask: url('你的logo.svg路径') no-repeat center / contain;
  background-color: #ffffff; /* 初始颜色 */
}
.site-logo.orange {
  background-color: #ff7f00; /* 橙色 */
}

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