仅用CSS实现6个盒子导航跳转后转为顶部固定导航的可行性问询

完全可以用纯CSS实现你要的效果，核心是利用**:target伪类**检测锚点跳转状态，结合CSS选择器切换导航的显示状态。下面是新手友好的具体实现步骤：

1. HTML结构搭建 #

先写出页面基本结构：顶部锚点区域（用于恢复盒子导航）、6个内容区域、包含两种导航的容器。

<!-- 顶部锚点区域，触发恢复盒子导航 -->
<section id="top"></section>

<!-- 6个对应导航的内容区域 -->
<section id="section1">区域1内容</section>
<section id="section2">区域2内容</section>
<section id="section3">区域3内容</section>
<section id="section4">区域4内容</section>
<section id="section5">区域5内容</section>
<section id="section6">区域6内容</section>

<!-- 导航容器 -->
<div class="nav-container">
  <!-- 初始显示的盒子样式导航 -->
  <nav class="box-nav">
    <a href="#section1">菜单1</a>
    <a href="#section2">菜单2</a>
    <a href="#section3">菜单3</a>
    <a href="#section4">菜单4</a>
    <a href="#section5">菜单5</a>
    <a href="#section6">菜单6</a>
  </nav>

  <!-- 跳转后显示的固定导航 -->
  <nav class="fixed-nav">
    <a href="#top">回到顶部</a>
    <a href="#section1">菜单1</a>
    <a href="#section2">菜单2</a>
    <a href="#section3">菜单3</a>
    <a href="#section4">菜单4</a>
    <a href="#section5">菜单5</a>
    <a href="#section6">菜单6</a>
  </nav>
</div>

2. CSS样式编写 #

分三部分设置：基础全局样式、初始导航样式、锚点触发的切换规则。

基础全局样式 #

/* 平滑滚动提升体验 */
html {
  scroll-behavior: smooth;
  margin: 0;
  padding: 0;
}

/* 内容区域占满屏幕高度，确保可滚动 */
section {
  height: 100vh;
  padding: 2rem;
  box-sizing: border-box;
}

/* 顶部锚点区域不占空间 */
#top {
  height: 0;
  padding: 0;
}

初始导航样式 #

/* 盒子导航：横向排列，每个链接是卡片样式 */
.box-nav {
  display: flex;
  gap: 1.2rem;
  padding: 3rem 1rem;
  justify-content: center;
  margin: 0;
}

.box-nav a {
  display: block;
  padding: 1.5rem 2rem;
  background: #e8f0fe;
  border-radius: 8px;
  text-decoration: none;
  color: #2d3748;
  font-weight: 500;
  transition: background 0.2s;
}

.box-nav a:hover {
  background: #c6e2ff;
}

/* 固定导航：默认隐藏，固定在顶部 */
.fixed-nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  display: none;
  justify-content: center;
  gap: 2rem;
  padding: 1rem;
  margin: 0;
  box-sizing: border-box;
}

.fixed-nav a {
  text-decoration: none;
  color: #2d3748;
  font-weight: 500;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  transition: background 0.2s;
}

.fixed-nav a:hover {
  background: #f7fafc;
}

锚点触发的样式切换 #

用:target伪类检测锚点状态，切换导航显示：

/* 点击内容区域锚点时：隐藏盒子导航，显示固定导航 */
section:not(#top):target ~ .nav-container .box-nav {
  display: none;
}

section:not(#top):target ~ .nav-container .fixed-nav {
  display: flex;
}

/* 点击回到顶部锚点时：恢复盒子导航，隐藏固定导航 */
section#top:target ~ .nav-container .box-nav {
  display: flex;
}

section#top:target ~ .nav-container .fixed-nav {
  display: none;
}

/* 内容区域加顶部内边距，避免被固定导航遮挡 */
section:not(#top):target {
  padding-top: 60px;
}

效果说明 #

• 页面打开时，默认显示6个盒子样式的导航菜单。
• 点击任意菜单跳转到对应内容区域后，盒子导航隐藏，顶部固定导航显示。
• 点击固定导航里的「回到顶部」，会恢复显示盒子样式导航，隐藏固定导航。

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