我（深深地..）遇到了导航栏的问题，当我们向下滚动时，导航栏消失了，尽管有一个经典的CSS位置：固定分配给它的类。
我认为这是由于我使用了一些CSS来实现视差效果（如我所愿），但我找不到在哪里。
那么如何保持导航栏/菜单固定呢？ 提前致谢！！ 迪迪埃
这是 html/css 代码：
html {
height: 100%;
overflow: hidden;
}
html,
body {
padding: 0;
margin: 0;
}
body {
background: #eee;
font-size: 16px;
font-family: sans-serif,arial;
height: 100%;
perspective: 1px;
transform-style: preserve-3d;
overflow-y: scroll;
overflow-x: hidden;
}
.Para {
box-sizing: border-box;
min-height: 60vh;
position: relative;
transform-style: inherit;
}
.Para-img {
content: "";
position: absolute;
display: block;
background-image: url(https://cdn.imgpaste.net/2022/10/10/Kem93m.png);
min-height: 100vh;
width: 100%;
margin-top: 100px;
left: 0;
right: 0;
transform:
translateZ(-1px)
scale(2);
background-size: cover;
background-position: center 30%;
transform-origin: center bottom;
z-index: -1;
}
section {
position: relative;
width: 100%;
background-color: grey;
height: 150vh;
padding-top: 1em;
}
.content {
position: relative;
display: block;
max-width: 75%;
margin: auto;
}
/* menuCSS */
.nav{
width: 100%;
height: 60px;
position: fixed;
top: 0;
z-index: 999
}
ul li{
list-style: none;
width: 200px;
line-height: 60px;
position: relative;
background: #222;
box-shadow: 0px 2px 5px 0px red;
text-align: center;
float: left;
background-color: #010000;
color: white;
}<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav class="nav">
<ul>
<li>Home</li>
<li>Portfolio</li>
<li>Products</li>
<li>About</li>
</ul>
</nav>
<div class="Para">
<div class="Para-img"></div>
</div>
<section>
<div class="content">
<h1>Title</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</section>
</body>
</html>html {
height: 100%;
overflow: hidden;
}
body {
padding: 0;
margin: 0;
background: #eee;
font-size: 16px;
font-family: sans-serif, arial;
height: 100%;
overflow-y: scroll;
}
.Para {
box-sizing: border-box;
min-height: 60vh;
position: relative;
}
.Para-img {
content: "";
position: absolute;
display: block;
background-image: url(https://cdn.imgpaste.net/2022/10/10/Kem93m.png);
min-height: 100vh;
width: 100%;
margin-top: 100px;
left: 0;
right: 0;
transform: translateZ(-1px) scale(2);
background-size: cover;
background-position: center 30%;
transform-origin: center bottom;
z-index: -1;
}
section {
position: relative;
width: 100%;
background-color: grey;
height: 150vh;
padding-top: 1em;
}
.content {
position: relative;
display: block;
max-width: 75%;
margin: auto;
}
/* menuCSS */
.nav {
width: 100%;
height: 60px;
position: fixed;
top: 0;
background-color: white;
/* Add a background color if needed */
z-index: 999;
}
ul li {
list-style: none;
width: 200px;
line-height: 60px;
position: relative;
background: #222;
box-shadow: 0px 2px 5px 0px red;
text-align: center;
float: left;
background-color: #010000;
color: white;
}<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav class="nav">
<ul>
<li>Home</li>
<li>Portfolio</li>
<li>Products</li>
<li>About</li>
</ul>
</nav>
<div class="Para">
<div class="Para-img"></div>
</div>
<section>
<div class="content">
<h1>Title</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</section>
</body>
</html>上述方法有其自身的缺点。当你尝试这个时你就会知道。