制作固定的 HTML <nav>

Question

我使用position: fixed样式使<nav>不移动。然而，如果存在<header>，则存在与<header>区域一样多的裕度。在向上移动了<header>区域那么多之后，我想将其固定在那个位置。

我在使用React库，我自己学习，所以很难找到方法。

#hd a {
font-family: "array";
font-size: 30px;
}
#hd {
margin-left: 0.5%;
width: 99%;
height: 45px;
display: flex;
justify-content: space-between;
align-items: center;
text-align: center;
}
#btn1 {
width: 100px;
height: 30px;
border-radius: 30px;
background-color: white;
border-color: #71bbff;
outline: 0;
}
#btn2 {
width: 100px;
height: 30px;
border-radius: 30px;
background-color: #71bbff;
outline: 0;
border-color: #71bbff;
margin-left: 25px;
}
/* header */
/* main */
#main {
width: 100%;
height: 600px;
}
nav a {
text-decoration: none;
color: white;
font-size: 25px;
}
nav {
width: 100%;
height: 60px;
position: absolute;
}
nav:hover {
background-color: black;
}
/*
#nav.sticky {
position: fixed;
margin-top: -45px;
background: white;
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);
}
*/
ul {
height: 60px;
display: flex;
justify-content: space-around;
align-items: center;
list-style: none;
}
ul li {
width: 130px;
text-align: center;
}
ul li:hover {
transition:all .3s ease-out;
border-bottom: 1px solid orange;
}
#fmenu ul {
position: absolute;
}
#smenu {
border-top: 1px solid orange;
width: 130px;
height: 240px;
display: none;
background: black;
}
#smenu li {
margin-top: 13px;
width: 100%;
}
#smenu li:hover {
background-color: peru;
}
#fmenu:hover #smenu {
display: block;
}

<header id="hd">
<img src="http://picsum.photos/45/45.jpg" width='45' />
<a>Array</a>
<div id="btn">
<button id="btn1"href="#">Login</button>
<button id="btn2"href="#">회원가입</button>
</div>
</header>
<div id="main">
<nav id="nav">
<ul>
<li><a href="#">Array</a></li>
<li id="fmenu"><a href="#">커뮤니티</a>
<ul id="smenu">
<li><a href="#">자유게시판</a></li>
<li><a href="#">질문게시판</a></li>
<li><a href="#">정보게시판</a></li>
<li><a href="#">프로젝트</a></li>
<li><a href="#">일기장</a></li>
</ul></li>
<li><a href="#teamw">구성원</a></li>
<li><a href="#union">연합팀</a></li>
</ul>
</nav>
</div>

Answer 1

您需要在DOM树中将导航标签向上移动一级，而不是固定位置(使元素的位置不变(，而是使用相对定位的粘性位置，直到它越过指定的阈值，在该点上它被视为固定定位。以下是相关部分：

<header>....</header>
<nav id='nav'>...</nav>
<div id='main>...</div>

在css中，

nav{
width: 100%;
position: sticky;
top:0;
background-color: #000;
}

进行这些更改以获得您想要的效果。