自定义网站不同区块滚动触发Logo变色实现技术问询

嗨，这个需求我之前做类似项目时也碰到过，核心逻辑其实就是监听滚动事件 + 判断当前可视区域的目标Section + 动态切换Logo样式，下面给你一套可直接复用的落地方案：

步骤1：HTML结构准备 #

先给每个Section加上自定义属性，用来标记该区域对应的Logo颜色；同时给Logo元素加个固定类方便JS选择：

<!-- 固定定位的Logo元素 -->
<div class="site-logo">My Custom Logo</div>

<!-- 页面各个Section -->
<section class="carousel-section">
  <!-- 轮播内容区域 -->
</section>
<section class="red-bg-section" data-logo-color="white">
  <!-- 红色背景内容区域 -->
</section>
<section class="green-bg-section" data-logo-color="purple">
  <!-- 绿色背景内容区域 -->
</section>

步骤2：基础CSS样式 #

给Logo设置默认颜色，加上过渡动画让颜色切换更丝滑；同时定义好各个Section的背景色：

.site-logo {
  position: fixed;
  top: 20px;
  left: 20px;
  font-size: 28px;
  font-weight: 700;
  transition: color 0.3s ease; /* 平滑过渡效果 */
  color: purple; /* 默认紫色 */
}

/* 白色Logo状态类 */
.site-logo.logo-white {
  color: #fff;
}

/* 紫色Logo状态类（如果需要还原默认） */
.site-logo.logo-purple {
  color: purple;
}

/* 各Section示例样式 */
.carousel-section {
  height: 100vh;
  background: #f0f0f0;
}
.red-bg-section {
  height: 100vh;
  background: #e74c3c;
}
.green-bg-section {
  height: 100vh;
  background: #2ecc71;
}

步骤3：JavaScript核心逻辑 #

核心是判断哪个Section当前处于可视区域的「主要位置」，然后根据它的data-logo-color属性切换Logo颜色，同时加上防抖优化滚动性能：

const logo = document.querySelector('.site-logo');
const sections = document.querySelectorAll('section');

// 判断元素是否处于可视区域的核心判定函数（可调整阈值）
function isSectionInView(element) {
  const rect = element.getBoundingClientRect();
  const viewportHeight = Math.max(document.documentElement.clientHeight, window.innerHeight);
  // 当元素占据视口50%以上时，判定为当前活跃Section
  return rect.top <= viewportHeight / 2 && rect.bottom >= viewportHeight / 2;
}

// 更新Logo颜色的函数
function updateLogoColor() {
  sections.forEach(section => {
    if (isSectionInView(section)) {
      const targetColor = section.dataset.logoColor;
      // 先移除所有颜色类，再添加目标类
      logo.classList.remove('logo-white', 'logo-purple');
      if (targetColor === 'white') {
        logo.classList.add('logo-white');
      } else if (targetColor === 'purple') {
        logo.classList.add('logo-purple');
      }
      // 找到匹配的Section后直接跳出循环，避免重复判断
      return;
    }
  });
}

// 防抖函数：减少滚动事件触发频率，提升性能
function debounce(func, delay = 100) {
  let timeoutId;
  return (...args) => {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => func.apply(this, args), delay);
  };
}

// 页面加载时先执行一次，确保初始状态正确
window.addEventListener('load', updateLogoColor);
// 监听滚动事件，用防抖包裹优化性能
window.addEventListener('scroll', debounce(updateLogoColor));

额外优化小技巧 #

• 如果Section高度差异大，可以调整isSectionInView里的阈值（比如改成viewportHeight * 0.3），让Logo切换时机更贴合你的需求；
• 也可以把颜色值直接存在data属性里（比如data-logo-color="#ffffff"），然后用JS直接设置logo.style.color = targetColor，这样不用写多个CSS类，更灵活；
• 对性能要求高的场景，推荐用IntersectionObserver替代滚动监听，它的性能表现更好，尤其适合Section数量多的页面。

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