请求实现topnav视口淡入同时hero-nav淡出的JS解决方案

一、先设置CSS过渡与初始状态 #

给两个导航栏添加平滑过渡动画，同时设置初始显示状态：

/* 给导航栏添加过渡动画，保证切换流畅 */
#topnav, #hero-nav {
  transition: opacity 0.5s ease-in-out;
}

/* 初始状态：topnav透明隐藏，不响应点击；hero-nav正常显示 */
#topnav {
  opacity: 0;
  pointer-events: none;
}

#hero-nav {
  opacity: 1;
}

/* 切换后的状态类 */
#topnav.show {
  opacity: 1;
  pointer-events: auto;
}

#hero-nav.hide {
  opacity: 0;
  pointer-events: none;
}

二、添加JavaScript触发逻辑 #

直接复制这段代码到你的HTML文件末尾（</body>标签之前）即可，不需要懂原理：

// 获取两个导航栏元素
const topnav = document.getElementById('topnav');
const heroNav = document.getElementById('hero-nav');

// 创建视口观察器，检测topnav是否进入视口
const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    // 当topnav进入视口时，切换状态类
    if (entry.isIntersecting) {
      topnav.classList.add('show');
      heroNav.classList.add('hide');
    } else {
      // 可选：如果topnav离开视口，恢复初始状态（不需要的话删掉这段）
      topnav.classList.remove('show');
      heroNav.classList.remove('hide');
    }
  });
}, {
  threshold: 0.1 // 当topnav有10%进入视口时触发切换，可改成0（刚碰到就触发）或1（完全进入才触发）
});

// 开始观察topnav
observer.observe(topnav);

三、使用说明 #

1. 把上面的CSS代码粘贴到你的现有CSS文件里，或者放在HTML的<style>标签中。
2. 把JS代码复制到HTML文件的</body>标签之前，确保页面加载完再执行。
3. 确认你的HTML里确实存在id为topnav和hero-nav的导航栏元素。

可以调整的细节：

• 把transition: opacity 0.5s ease-in-out里的0.5s改成你想要的动画速度，比如0.3s更快，1s更慢。
• 如果不需要topnav离开视口时恢复原样，直接删掉JS里的else块内容。

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