Webflow转WordPress后JS导航动画报错TypeError: r is undefined求助

我之前帮客户处理过Webflow转WordPress的类似问题，这个TypeError: r is undefined基本都是Webflow导出的JS依赖的DOM元素在WordPress里找不到导致的——毕竟Webflow自动生成的DOM结构和WordPress主题的结构大概率不一样。结合你要实现的「滚动时导航栏背景+文字颜色切换」需求，给你一步步的修复方案：

1. 定位错误的具体来源 #

先打开开发者控制台（按F12），找到抛出TypeError: r is undefined的JS文件和行号。你会发现这个r就是脚本里试图获取的导航栏元素——因为WordPress里的导航类名/ID和Webflow里的不一样，所以脚本找不到它，就抛出了未定义错误。

2. 对比Webflow和WordPress的导航DOM结构 #

• 打开Webflow正常站点，右键导航栏选择「检查」，找到导航的核心容器元素（比如Webflow自动生成的类名可能是.w-nav或者你自定义的.navbar）。
• 再打开你的WordPress测试站点，同样检查导航栏的DOM结构，看WordPress主题里的导航容器用的是什么类名/ID（比如常见的#site-navigation或者.main-navigation）。

3. 修改原Webflow脚本的选择器 #

找到WordPress主题里加载的Webflow导出JS文件（通常在主题的js文件夹，或者通过wp_enqueue_script注册的脚本），找到监听滚动的那段代码：

• 把原来获取导航元素的选择器，替换成WordPress里的正确选择器。比如原脚本是var r = document.querySelector('.w-nav')，就改成var r = document.querySelector('#site-navigation')（根据你实际的DOM调整）。
• 同时要确保脚本里用来切换样式的类名（比如Webflow里的.navbar-scrolled），在WordPress的导航元素上能被正确添加/移除，对应CSS样式也要匹配（你说忽略CSS差异，这步确认下类名对应就行）。

4. 备选方案：重写简化的滚动监听脚本 #

如果原Webflow脚本太依赖自身的框架逻辑，不如直接写一个轻量的自定义脚本，完全实现你的需求：

第一步：添加JS脚本 #

把这段代码添加到WordPress的「外观→自定义→额外JS」里，或者主题的functions.php中通过wp_add_inline_script加载：

document.addEventListener('DOMContentLoaded', function() {
  // 替换成你WordPress站点导航容器的正确选择器
  const navbar = document.querySelector('#site-navigation');
  
  // 监听滚动事件
  window.addEventListener('scroll', function() {
    // 滚动距离超过50px时切换样式，可根据需求调整数值
    if (window.scrollY > 50) {
      navbar.classList.add('scrolled');
    } else {
      navbar.classList.remove('scrolled');
    }
  });
});

第二步：匹配CSS样式 #

在主题的自定义CSS里添加（外观→自定义→额外CSS）：

/* 滚动后的导航样式 */
.scrolled {
  background-color: #ffffff !important;
}
/* 滚动后的导航链接样式 */
.scrolled .nav-link {
  color: #000000 !important;
}

（注意把.nav-link换成你实际的导航链接类名）

5. 测试验证 #

修改后刷新页面，滚动页面看导航栏是否正常切换背景和文字颜色，同时检查开发者控制台是否还有r is undefined的错误提示。

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