使用fullpage.js滚动过首屏后无法点击头部链接的问题求助

1. 修复Fixed Header可点击问题 #

fixed定位后无法点击，核心原因是header的z-index层级低于fullPage容器，被内容覆盖了。给header添加高优先级z-index，同时完善fixed定位的布局：

.header{
  position: fixed; /* 保留fixed定位 */
  top: 0;
  left: 0;
  right: 0; /* 确保header占满屏幕宽度 */
  z-index: 9999; /* 层级高于fullPage默认容器 */
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30px 10%;
  background-color: #333;
}

/* 原有CSS保持不变 */
.logo {
  color: white;
}

.nav_links {
  list-style: none;
  display: flex;
}

.nav_links li {
  padding: 0px 20px;
}

.nav_links li a {
  transition: color 0.3s ease 0s;
}

.nav_links li a:hover {
  color: rgb(108, 212, 34);
}

.nav_links a {
  font-weight: 500;
  color: #edf0f1;
  text-decoration: none;
}

/* 添加禁用交互的类 */
.header.disabled {
  pointer-events: none;
  opacity: 0.7; /* 可选：视觉上提示不可用状态 */
}

2. 结合fullPage.js回调控制交互权限 #

利用fullPage的afterLoad回调，判断当前所在section是否为首屏，动态切换header的交互状态：

new fullpage('#fullpage', {
  // 保留你的其他配置项
  afterLoad: function(origin, destination, direction) {
    const header = document.querySelector('.header');
    // fullPage的section索引从0开始，首屏对应index=0
    if (destination.index !== 0) {
      header.classList.add('disabled');
    } else {
      header.classList.remove('disabled');
    }
  }
});

关键说明 #

• pointer-events: none会完全屏蔽元素的鼠标事件（点击、悬停等），精准实现滚动后不可访问的需求。
• 补充top:0; left:0; right:0是为了避免fixed定位后header宽度收缩，保证布局一致性。
• 如果页面初始化时默认不在首屏，建议在fullPage初始化后主动执行一次状态判断，避免初始状态异常。

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