WordPress Neve主题滚动100px后修改头部文字颜色的代码求助

架构老林

2026-8-16

解决Neve主题滚动后头部文字颜色修改问题

实现思路

通过监听页面滚动事件，当滚动距离超过100px时为目标元素添加自定义类，再通过高优先级CSS样式覆盖主题默认规则，实现文字颜色切换。

步骤1：添加滚动监听JavaScript代码

将以下代码添加到WordPress后台「外观→自定义→额外代码→自定义JS」区域，或主题的functions.php文件中（通过wp_enqueue_script注册）：

window.addEventListener('scroll', () => {
  const scrollThreshold = 100;
  const header = document.querySelector('header.header');
  const primaryBtn = document.querySelector('a.button.button-primary');
  const bookNowEl = document.querySelector('.book-now-header');

  if (window.scrollY > scrollThreshold) {
    header.classList.add('scrolled-active');
    primaryBtn.classList.add('scrolled-btn');
    bookNowEl.classList.add('scrolled-book-text');
  } else {
    header.classList.remove('scrolled-active');
    primaryBtn.classList.remove('scrolled-btn');
    bookNowEl.classList.remove('scrolled-book-text');
  }
});

步骤2：添加自定义CSS样式

将以下代码添加到「外观→自定义→额外代码→自定义CSS」区域，或主题的style.css文件中：

/* 滚动后头部背景色（若插件未生效可在此设置） */
header.header.scrolled-active {
  background-color: #222222; /* 替换为你的目标背景色 */
}

/* 滚动后主按钮文字颜色 */
a.button.button-primary.scrolled-btn {
  color: #ffffff !important; /* 替换为你的目标文字颜色 */
}

/* 滚动后book-now区域文字颜色 */
.book-now-header.scrolled-book-text {
  color: #ffffff !important; /* 替换为你的目标文字颜色 */
}