我想做一个固定的“导航”

Question

我用‘固定’使‘导航’不动。然而，如果有一个“标题”，则有一个与“标题”区域一样多的边距。在向上移动了多少‘头部’区域后，我想把它固定在那个位置。我在用“反应”所以很难找到方法。我正在自学，所以我原来知道的不多，所以我来学习一些新的东西。

null

<header id="hd">
        <img src={logo} 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>

#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;
}

null

Answer 1

#hd{
  position: fixed;
  top: 100px;
}
#main {
  position: fixed;
  top: 0px;
}