如何让nav.nav-bar子元素仅在父元素滚动显示时出现？

你遇到的核心问题是：用z-index: -1隐藏父导航栏时，未设置定位的子元素（比如你的<a>标签）不会继承父元素的层级，依然会在正常文档流中显示。不用新增任何JS函数，只需要调整CSS就能让子元素随父元素同步显示/隐藏，给你两种实用方案：

方案一：用透明度+过渡动画实现流畅显示（推荐） #

这种方式保留了原有的过渡效果，体验更顺滑：

修改你的spice.css中导航栏的样式：

/** navigation bar */
.nav-bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  /* 替换z-index为opacity，让整个导航栏（包括子元素）透明隐藏 */
  opacity: 0;
  pointer-events: none; /* 初始状态下禁止点击，避免干扰页面其他元素 */
  height: 7vw;
  background-color: rgba(250, 250, 250, 0.5);
  -webkit-transition: all .25s ease-out;
  -moz-transition: all .25s ease-out;
  -ms-transition: all .25s ease-out;
  -o-transition: all .25s ease-out;
  transition: all .25s ease-out;
}

.nav-bar.appear{
  position: fixed;
  background-color: rgba(159, 128, 255, 0.9);
  z-index: 20;
  opacity: 1; /* 显示时恢复完全不透明 */
  pointer-events: auto; /* 恢复导航栏的点击交互 */
  -webkit-transition: all .25s ease;
  -moz-transition: all .25s ease;
  -ms-transition: all .25s ease;
  -o-transition: all .25s ease;
  transition: all .25s ease;
}

原理说明： #

• opacity: 0会让整个父元素及其所有子元素完全透明，实现初始隐藏
• pointer-events: none可以防止透明状态下的导航栏子元素被误点击
• 当滚动触发.appear类时，恢复透明度和点击事件，导航栏和子元素就会同步显示出来

方案二：用visibility属性控制显示/隐藏 #

如果不需要过渡动画，这种方式更直接：

修改CSS如下：

/** navigation bar */
.nav-bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  visibility: hidden; /* 初始隐藏整个导航栏（包括子元素） */
  height: 7vw;
  background-color: rgba(250, 250, 250, 0.5);
  -webkit-transition: all .25s ease-out;
  -moz-transition: all .25s ease-out;
  -ms-transition: all .25s ease-out;
  -o-transition: all .25s ease-out;
  transition: all .25s ease-out;
}

.nav-bar.appear{
  position: fixed;
  background-color: rgba(159, 128, 255, 0.9);
  z-index: 20;
  visibility: visible; /* 添加类后显示导航栏 */
  -webkit-transition: all .25s ease;
  -moz-transition: all .25s ease;
  -ms-transition: all .25s ease;
  -o-transition: all .25s ease;
  transition: all .25s ease;
}

原理说明： #

• visibility: hidden会隐藏元素及其子元素，但依然保留元素的占位空间（和display: none不同）
• 当添加.appear类时，设置visibility: visible即可让导航栏和子元素同步显示

为什么原来的z-index方式失效？ #

z-index属性只对设置了position（非static）的元素生效，你的<a>标签是默认的inline元素，没有设置定位，所以它不会继承父元素的z-index值，依然会在正常文档流中显示在页面上层，导致父元素隐藏但子元素可见的问题。

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