Javascript 显示css html的菜单栏问题

您好，当我从笔记本电脑或其他设备上查看菜单栏时，我在显示菜单栏时遇到一些问题，我想知道是否有人可以帮助我！问题是，每当我向下滚动到幻灯片或视频位置时，我的菜单栏就会消失在幻灯片或视频后面。我想当你尝试的时候，你会完全理解的

$（窗口）.on（'scroll'，function（）{
如果（$（窗口）.scrollTop（））{
$（'nav'）.addClass（'black'）；
}否则{
$（'nav'）.removeClass（'black'）；
}
});
功能切换菜单（x）{
x、 切换（'openMenu'）；
}

*{
保证金：0；
填充：0；
框大小：继承；
}
身体{
字体：15px/1.5 Arial，Helvetica，无衬线；
框大小：边框框；
}
/*菜单栏*/
导航{
位置：固定；
排名：0；
左：0；
宽度：100%；
高度：80px；
填充：0 100px；
过渡：所有300毫秒；
}
导航黑色{
背景：rgba（0,0,0,0.8）；
}
导航标志{
显示：内联块；
宽度：25%；
填充：0 5px；
线高：80px；
字体大小：24px；
过渡：均为0.3秒；
文本对齐：居中；
}
导航。黑色。标志{
颜色：#fff；
}
导航a{
显示：内联块；
宽度：12.5%；
线高：80px；
颜色：#151515；
填充：0 5px；
文字装饰：无；
文本转换：大写；
过渡：.3s；
文本对齐：居中；
垂直对齐：顶部；
}
黑色导航{
颜色：#fefefe；
}
导航a：聚焦{
大纲：无；
}
主动导航{
背景：#E2472F；
颜色：#fff；
边界半径：6px；
}
第2.1节{
宽度：100%；
高度：100vh；
背景：url（img/lol.jpg）；
背景尺寸：封面；
背景位置：中心；
}
/*汉堡图标*/
.汉堡包{
显示：无；
光标：指针；
}
.汉堡包，
.汉堡包，
.汉堡包{
宽度：35px；
高度：5px；
背景色：#fefe；
利润率：6px0；
过渡：全部为0.4s；
}
.openMenu.汉堡包.酒吧1{
-webkit变换：旋转（-45度）平移（-9px，6px）；
变换：旋转（-45度）平移（-9px，6px）；
}
.openMenu.汉堡包.酒吧2{
不透明度：0；
}
.openMenu.汉堡包.bar3{
-webkit变换：旋转（45度）平移（-8px，-8px）；
变换：旋转（45度）平移（-8px，-8px）；
}
/*媒体*/
@介质（最大宽度：860像素）{
导航{
背景：rgba（0,0,0,0.8）；
填充：0 20px；
颜色：#fefefe；
溢出：隐藏；
}
.标志{
位置：固定；
排名：0；
}
导航a{
宽度：100%；
线高：计算（（100vh-80px）/6）；
变换：translateY（80px）；
可见性：隐藏；
}
.openMenu a{
颜色：#fefefe；
能见度：可见；
}
.汉堡包{
显示：内联块；
位置：绝对位置；
右：20px；
顶部：20px；
}
.openMenu{
高度：100vh；
}
.滑块{
宽度：100%；
身高：23%；
}
第2.1节{
宽度：100%；
身高：30%；
}
文章#视频{
宽度：100%；
}
录像带{
宽度：100%；
}
旁白{
边框底部：#e8491d 3px实心；
宽度：100%；
高度：250px；
}
旁白#欢迎下一步{
字体系列：草书；
宽度：100%；
身高：76%；
}
旁白#新{
字体系列：衬线；
身高：100%；
宽度：100%；
}
}
/*幻灯片放映*/
*{
保证金：0；
填充：0；
列表样式：无；
文字装饰：无；
}
.滑块{
溢出：隐藏；
身高：450px%；
}
.滑块数字分区{
宽度：20%；
浮动：左；
}
.滑块图img{
宽度：100%；
浮动：左；
}
.滑块图形{
位置：相对位置；
宽度：500%；
保证金：0；
左：0；
动画：25秒滑无限；
}
@滑动关键帧{
0% {
左：0%；
}
10% {
左：0%；
}
12% {
左-100%；
}
22% {
左-100%；
}
24% {
左-200%；
}
34% {
左-200%；
}
36% {
左-300%；
}
46% {
左-300%；
}
48% {
左-400%；
}
58% {
左-400%；
}
60% {
左-300%；
}
70% {
左-300%；
}
72% {
左-200%；
}
82% {
左-200%；
}
84% {
左-100%；
}
94% {
左-100%；
}
96% {
左：0%；
}
}
/*欢迎光临*/
文章{
浮动：左；
保证金：0自动；
宽度：23%；
高度：自动；
}
#欢迎文集{
浮动：右：
保证金：0自动；
宽度：100%；
高度：自动；
边框底部：#e8491d 3px实心；
身高：38%；
}
#新闻1{
左缘：5%；
宽度：52%；
身高：7%；
显示：内联flex；
}
第三节新闻{
边框底部：#e8491d 3px实心；
身高：100%；
}
旁白#新{
填充：27%；
身高：100%；
宽度：100%；
字体系列：草书；
}

兰德沙夫特
兰德沙夫特
欢迎
Lamium（死荨麻）是唇形科中约40-50种开花植物的一个属，是其中的模式属。它们都是原产于欧洲、亚洲和北非的草本植物，但其中一些已经成为非常成功的作物田杂草，现在已广泛移植到温带世界的大部分地区。[2][4][5]

达达斯

在导航元素中添加

z-index

规则解决了我这边的问题

nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 80px;
  padding: 0 100px;
  transition: all 300ms;
  z-index: 100;
}

---

稍微阅读一下这个主题

给你的标题/nav一个z索引：

nav {z-index:100}

Z索引将内容放置在前后空间。该值越高，元素越靠近前面