【发布时间】：2023-02-10 19:55:25
【问题描述】：
当我在页面上向下滚动时，页面顶部的橙色文本与导航菜单重叠。我不知道为什么会这样，我尝试删除 float: left; 代码和 position: relative; 代码，因为我认为它们可能是问题所在，但不是。当您滚动时，我希望导航栏下方有橙色文本。任何帮助表示赞赏。
function toggleMobileMenu(menu) {
menu.classList.toggle('open');
}body {
background-color: rgb(245, 245, 245);
font-family: 'Roboto', sans-serif;
padding: 0;
margin: 0;
height: 200vh;
}
header {
background: rgb(255, 255, 255);
box-shadow: rgba(120, 126, 133, 0.2) 0px 8px 24px;
display: flex;
justify-content: center;
position: fixed;
width: 100%;
box-shadow: rgba(120, 126, 133, 0.2) 0px 8px 24px;
}
header a {
text-decoration: none;
}
header ul {
list-style: none;
display: flex;
align-items: center;
justify-content: center;
}
header ul a {
color: rgb(58, 58, 58);
}
nav {
background: rgb(255, 255, 255);
padding-bottom: 0.6em;
padding-top: 0.6em;
width: 100%;
position: fixed;
width: 100%;
box-shadow: rgba(120, 126, 133, 0.2) 0px 8px 24px;
}
nav ul {
list-style: none;
text-align: center;
margin-top: 0px;
padding-left: 0px;
margin-bottom: 0px;
justify-content: center;
}
nav ul li {
display: inline-block;
vertical-align: middle;
}
nav ul li a {
display: block;
padding: 15px;
padding-top: 10px;
padding-bottom: 10px;
text-decoration: none;
color: rgb(0, 0, 0);
font-weight: 800;
text-transform: uppercase;
margin: 0 10px;
}
nav ul li a, nav ul li a:after, nav ul li a:before {
transition: all .5s;
}
nav ul li a:hover {
color: #555;
}
nav.stroke ul li a, nav.fill ul li a {
position: relative;
}
nav.stroke ul li a:after, nav.fill ul li a:after {
position: absolute;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: 0%;
content: '.';
color: transparent;
background: rgb(255, 255, 255);
height: 1px;
}
nav.fill ul li a {
transition: all 2s;
}
nav.fill ul li a:after {
text-align: left;
content: '.';
margin: 0;
opacity: 0;
}
nav.fill ul li a:hover {
color: rgb(0, 0, 0);
z-index: 1;
}
nav.fill ul li a:hover:after {
z-index: -10;
animation: fill 0.6s forwards;
-webkit-animation: fill 0.6s forwards;
-moz-animation: fill 0.6s forwards;
opacity: 1;
}
.header-img {
display: none;
}
nav img {
width: 80px;
image-rendering: -moz-crisp-edges; /* Firefox */
image-rendering: -o-crisp-edges; /* Opera */
image-rendering: -webkit-optimize-contrast;/* Webkit (non-standard naming) */
image-rendering: crisp-edges;
-ms-interpolation-mode: nearest-neighbor;
}
#hamburger-icon {
margin: auto 0;
display: none;
cursor: pointer;
padding-top: 21.845px;
padding-bottom: 21.845px;
}
#hamburger-icon div {
width: 35px;
height: 3px;
background-color: rgb(0, 0, 0);
margin: 8px 0;
transition: 0.4s;
}
.open .bar1 {
-webkit-transform: rotate(-45deg) translate(-8px, 8px);
transform: rotate(-45deg) translate(-8px, 8px);
}
.open .bar2 {
opacity: 0;
}
.open .bar3 {
-webkit-transform: rotate(45deg) translate(-6px, -8px);
transform: rotate(45deg) translate(-6px, -8px);
}
.open .mobile-menu {
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.mobile-menu {
display: none;
position: absolute;
left: 0;
width: 100%;
padding-left: 0;
background-color: rgb(255, 255, 255);
box-shadow: rgba(120, 126, 133, 0.2) 0px 8px 24px;
margin: 0;
border: 1px solid black;
text-transform: uppercase;
box-sizing: border-box;
top: 84.69px;
}
.mobile-menu li {
padding-top: 10px;
padding-bottom: 10px;
}
@keyframes fill {
0% {
width: 0%;
height: 2px;
}
50% {
width: 100%;
height: 2px;
}
100% {
width: 100%;
height: 100%;
background: rgb(199, 199, 199);
}
}
.fake {
display: none;
}
.Iam {
padding: 2em;
font: normal 40px/50px Montserrat, sans-serif;
color: #999;
display: flex;
justify-content: center;
padding-top: 2em;
padding-bottom: 0em;
}
.Iam p {
height: 50px;
float: left;
margin-right: 0.3em;
}
.Iam b {
float: left;
overflow: hidden;
position: relative;
height: 50px;
top: 40px;
}
.Iam .innerIam {
display: inline-block;
color: #e74c3c;
position: relative;
white-space: nowrap;
top: 0;
left: 0;
/*animation*/
-webkit-animation:move 5s;
-moz-animation:move 5s;
-ms-animation:move 5s;
-o-animation:move 5s;
animation:move 5s;
/*animation-iteration-count*/
-webkit-animation-iteration-count:infinite;
-moz-animation-iteration-count:infinite;
-ms-animation-iteration-count:infinite;
-o-animation-iteration-count:infinite;
animation-iteration-count:infinite;
/*animation-delay*/
-webkit-animation-delay:1s;
-moz-animation-delay:1s;
-ms-animation-delay:1s;
-o-animation-delay:1s;
animation-delay:1s;
}
@keyframes move{
0% {
top: 0px;
}
20% {
top: -50px;
}
40% {
top: -100px;
}
60% {
top: -150px;
}
80% {
top: -200px;
}
}
@-webkit-keyframes move {
0% {
top: 0px;
}
20% {
top: -50px;
}
40% {
top: -100px;
}
60% {
top: -150px;
}
80% {
top: -200px;
}
}
@-moz-keyframes move {
0% {
top: 0px;
}
20% {
top: -50px;
}
40% {
top: -100px;
}
60% {
top: -150px;
}
80% {
top: -200px;
}
}
@-o-keyframes move {
0% {
top: 0px;
}
20% {
top: -50px;
}
40% {
top: -100px;
}
60% {
top: -150px;
}
80% {
top: -200px;
}
}
@keyframes move {
0% {
top: 0px;
}
20% {
top: -50px;
}
40% {
top: -100px;
}
60% {
top: -150px;
}
80% {
top: -200px;
}
}
@media only screen and (max-width: 920px) {
nav ul li a {
padding: 0px;
}
}
@media only screen and (max-width: 800px) {
header nav {
display: none;
}
#hamburger-icon {
display: block;
}
.header-img {
display: block;
}
.header-img img{
width: 80px;
height: 61px;
image-rendering: -moz-crisp-edges; /* Firefox */
image-rendering: -o-crisp-edges; /* Opera */
image-rendering: -webkit-optimize-contrast;/* Webkit (non-standard naming) */
image-rendering: crisp-edges;
-ms-interpolation-mode: nearest-neighbor;
position: relative;
top: 50%;
transform: translateY(-50%);
}
header {
justify-content: space-between;
}
.fake {
display: block;
width: 80px;
}
}
@media only screen and (max-width: 790px) {
.Iam {
font-size: 30px;
padding-top: 4em;
}
.Iam b {
top: 30px;
}
}
@media only screen and (max-width: 592px) {
.Iam {
font-size: 25px;
}
.Iam b {
top: 25px;
}
}
@media only screen and (max-width: 494px) {
.Iam {
font-size: 20px;
padding-top: 5em;
}
.Iam b {
top: 20px;
}
}
@media only screen and (max-width: 395px) {
.Iam {
font-size: 18px;
}
}
@media only screen and (max-width: 356px) {
.Iam {
font-size: 15px;
padding-top: 6em;
}
.Iam b {
top: 15px;
}
}<body>
<header>
<div class="header-img"><img src="https://i.imgur.com/bblqj5b.png" alt="SCP"></div>
<nav class="fill">
<ul>
<li><img src="https://i.imgur.com/bblqj5b.png" alt="SCP"></li>
<li><a href="index.html">Home</a></li>
<li><a href="wwd.html">What we do</a></li>
<li><a href="effects.html">Effects</a></li>
<li><a href="wycd.html">What you can do</a></li>
<li><a href="lildicky.html">Earth by Lil Dicky</a></li>
<li><a href="formular.html">Form</a></li>
</ul>
</nav>
<div id="hamburger-icon" onclick="toggleMobileMenu(this)">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
<ul class="mobile-menu">
<li><a href="index.html">Home</a></li>
<li><a href="wwd.html">What we do</a></li>
<li><a href="effects.html">Effects</a></li>
<li><a href="wycd.html">What you can do</a></li>
<li><a href="lildicky.html">Earth by Lil Dicky</a></li>
<li><a href="formular.html">Form</a></li>
</ul>
</div>
<div class="fake"></div>
</header>
<div class="Iam">
<p>We need to</p>
<b>
<div class="innerIam">
stop climate pollution<br>
help the world<br>
work together<br>
don't mess up<br>
and fix the climate<br>
</div>
</b>
</div>
</body>【问题讨论】：