如何实现导航栏在#home隐藏，滚动至features-icons及以下时显示？

嘿，我来帮你搞定这个导航栏显示的问题！根据你的需求，我们可以分几步实现导航栏在指定条件下的显示/隐藏逻辑：

1. 调整初始样式（HTML + CSS） #

首先得让导航栏在页面加载时默认隐藏，只有满足条件后才显示。先给导航栏新增一个初始隐藏的类（比如hidden-nav），保留你原有的scrolled-nav用来控制显示状态：

<nav class="navbar hidden-nav fixed-top navbar-expand-sm bg-light">
  <a class="navbar-brand" href="#">Front End Web Developer</a>
  <!-- 其他导航元素 -->
</nav>

然后在CSS里添加这两个类的样式，还可以加过渡动画让显示更平滑：

/* 初始隐藏状态 */
.hidden-nav {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* 显示状态 */
.scrolled-nav {
  opacity: 1;
  visibility: visible;
}

2. JavaScript 逻辑处理 #

我们需要覆盖两种触发场景：滚动到features-icons区块，以及点击「了解更多」按钮跳转后显示导航栏。

监听滚动事件 #

先获取目标区块和导航栏的DOM元素，然后通过滚动事件判断当前页面位置是否到达目标区块：

// 获取目标区块和导航栏元素
const featuresSection = document.getElementById('features-icons');
const navbar = document.querySelector('.navbar');

// 判断是否到达目标区块的函数
function checkScrollPosition() {
  const sectionRect = featuresSection.getBoundingClientRect();
  // 当目标区块顶部进入视口或已经在视口上方时，显示导航栏
  if (sectionRect.top <= window.innerHeight) {
    navbar.classList.remove('hidden-nav');
    navbar.classList.add('scrolled-nav');
  }
  // 如果你希望滚动回#home区块时重新隐藏导航栏，可以解开下面的注释
  // else {
  //   navbar.classList.add('hidden-nav');
  //   navbar.classList.remove('scrolled-nav');
  // }
}

// 页面加载时先检查一次（防止刷新时已经在下方区块）
window.addEventListener('load', checkScrollPosition);
// 监听滚动事件
window.addEventListener('scroll', checkScrollPosition);

处理「了解更多」按钮的点击事件 #

如果按钮是通过锚点跳转（比如href="#features-icons"），需要在跳转完成后触发导航栏显示：

// 替换成你的「了解更多」按钮选择器
const learnMoreBtn = document.querySelector('a[href="#features-icons"]');

learnMoreBtn.addEventListener('click', () => {
  // 锚点跳转需要一点时间，延迟执行确保导航栏在跳转后显示
  setTimeout(() => {
    navbar.classList.remove('hidden-nav');
    navbar.classList.add('scrolled-nav');
  }, 300); // 延迟时间可根据页面滚动速度调整
});

3. 额外优化 #

• 因为用了fixed-top类，记得给body添加上边距，避免导航栏显示后遮挡页面内容：

body {
  padding-top: 70px; /* 数值根据你的导航栏高度调整 */
}

这样调整后，导航栏会在页面加载时隐藏，当你滚动到features-icons区块或者点击「了解更多」按钮跳转过去后，就会平滑显示出来，并且在所有下方区块保持可见啦！

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