WordPress站点Header滚动过渡仅单向生效问题求助

嘿，我仔细看了你这段滚动监听的代码，问题主要出在重复绑定hover事件和可能缺失的CSS过渡配置上，咱们一步步来搞定它：

1. 核心问题：重复绑定hover事件导致逻辑冲突 #

你当前的代码每次触发scroll事件时，都会给菜单链接重新绑定hover事件——滚动向下绑一次，回到顶部又绑一次，多次叠加后，事件逻辑会混乱，回到顶部时的hover和动画切换自然就失效了。

咱们把hover事件的逻辑从scroll监听里抽出来，只绑定一次，或者更推荐直接用CSS伪类来实现hover效果（比JS更高效）。

2. 优化后的代码示例 #

第一步：用CSS实现hover样式（代替JS绑定） #

先把hover1和hover2的样式用CSS伪类写好，这样就不用在JS里反复绑定事件了：

/* 非粘性状态下的hover样式 */
.fusion-main-menu > ul > li > a:not(.menu-sticky-color):hover {
  /* 这里写hover1对应的样式 */
}

/* 粘性状态下的hover样式 */
.fusion-main-menu > ul > li > a.menu-sticky-color:hover {
  /* 这里写hover2对应的样式 */
}

/* 关键：给需要动画的元素加过渡属性 */
.fusion-header,
.fusion-logo a,
.fusion-main-menu > ul > li > a {
  transition: all 0.3s ease-in-out;
}

第二步：简化JS滚动监听逻辑 #

把重复的hover绑定去掉，同时缓存DOM元素提升性能：

// 缓存DOM元素，避免每次滚动都重新查询
const $header = jQuery(".fusion-header");
const $menuLinks = jQuery(".fusion-main-menu > ul > li > a");
const $logoLink = jQuery(".fusion-logo a");

// 滚动监听逻辑
jQuery(window).on("scroll", function() {
  const scrollTop = jQuery(window).scrollTop();

  if (scrollTop > 45) {
    // 向下滚动到阈值以上
    $header.addClass("active").removeClass("top");
    $menuLinks.addClass("menu-sticky-color");
    $logoLink.addClass("sticky-logo1").removeClass("logo1");
  } else {
    // 滚动回顶部阈值以内
    $header.removeClass("active").addClass("top");
    $menuLinks.removeClass("menu-sticky-color");
    $logoLink.addClass("logo1").removeClass("sticky-logo1");
  }
});

3. 额外检查点 #

• 确认active/top、logo1/sticky-logo1这些类的样式差异是可过渡的属性（比如height、background-color、transform等，display这类属性没法过渡）
• 检查有没有其他WordPress插件或主题JS代码干扰了Header的类切换，可以暂时禁用其他插件测试

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