如何基于背景色动态调整ScrollSpy导航的文本与背景颜色

核心思路 #

基于当前视口中的区块背景亮度，动态切换ScrollSpy的文本和背景色——深色背景用浅色导航样式，浅色背景用深色导航样式，关键是准确获取当前区块的背景色并计算其亮度，再绑定滚动事件实时更新样式。

具体实现步骤 #

1. 精准定位当前活跃区块 #

不要硬编码区块ID对应颜色，而是通过视口中心判断用户视觉焦点所在的区块，更贴合实际交互逻辑：

function getCurrentSection() {
  const sections = document.querySelectorAll('section[data-scrollspy]');
  let currentSection = null;
  const viewportCenter = window.scrollY + window.innerHeight / 2;

  sections.forEach(section => {
    const sectionTop = section.offsetTop;
    const sectionBottom = sectionTop + section.offsetHeight;
    if (viewportCenter >= sectionTop && viewportCenter <= sectionBottom) {
      currentSection = section;
    }
  });
  return currentSection;
}

2. 准确计算背景色相对亮度 #

采用符合WCAG标准的亮度计算公式，解决颜色格式兼容问题（如RGB/RGBA）：

function getRelativeLuminance(element) {
  const bgColor = window.getComputedStyle(element).backgroundColor;
  const rgbMatch = bgColor.match(/^rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*(\d+))?\)$/);
  if (!rgbMatch) return 1; // 默认按浅色背景处理

  let r = parseInt(rgbMatch[1]) / 255;
  let g = parseInt(rgbMatch[2]) / 255;
  let b = parseInt(rgbMatch[3]) / 255;

  // sRGB转线性RGB
  r = r <= 0.03928 ? r / 12.92 : Math.pow((r + 0.055) / 1.055, 2.4);
  g = g <= 0.03928 ? g / 12.92 : Math.pow((g + 0.055) / 1.055, 2.4);
  b = b <= 0.03928 ? b / 12.92 : Math.pow((b + 0.055) / 1.055, 2.4);

  // 计算相对亮度（范围0-1，0为纯黑，1为纯白）
  return 0.2126 * r + 0.7152 * g + 0.0722 * b;
}

3. 绑定滚动事件切换导航样式 #

实时检测区块并更新导航类名，搭配CSS过渡实现平滑切换：

const scrollSpyNav = document.querySelector('.scrollspy-nav');

function updateNavStyle() {
  const currentSection = getCurrentSection();
  if (!currentSection) return;

  const luminance = getRelativeLuminance(currentSection);
  // 亮度<0.5判定为深色背景，切换浅色导航样式
  if (luminance < 0.5) {
    scrollSpyNav.classList.add('light-style');
    scrollSpyNav.classList.remove('dark-style');
  } else {
    scrollSpyNav.classList.add('dark-style');
    scrollSpyNav.classList.remove('light-style');
  }
}

// 初始化+滚动监听（添加节流优化性能）
function throttle(func, delay) {
  let lastCall = 0;
  return function(...args) {
    const now = Date.now();
    if (now - lastCall >= delay) {
      lastCall = now;
      func.apply(this, args);
    }
  };
}
window.addEventListener('scroll', throttle(updateNavStyle, 100));
updateNavStyle();

4. 定义对应CSS样式 #

.scrollspy-nav {
  transition: all 0.3s ease;
  /* 基础布局样式 */
  position: fixed;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  padding: 16px;
  border-radius: 8px;
}

/* 浅色导航（适配深色背景区块） */
.scrollspy-nav.light-style {
  background-color: rgba(255,255,255,0.9);
  color: #1a1a1a;
}
.scrollspy-nav.light-style .nav-item.active {
  border-left: 3px solid #1a1a1a;
}

/* 深色导航（适配浅色背景区块） */
.scrollspy-nav.dark-style {
  background-color: rgba(0,0,0,0.9);
  color: #ffffff;
}
.scrollspy-nav.dark-style .nav-item.active {
  border-left: 3px solid #ffffff;
}

常见问题排查 #

• 亮度计算不准确：检查区块是否存在多层背景（如父元素背景覆盖），需递归获取实际可见的背景色；
• 滚动切换卡顿：确保节流函数的延迟值合理（100ms左右兼顾响应速度和性能）；
• 样式切换不生效：确认导航栏的类名选择器优先级足够，避免被其他样式覆盖。

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