스크롤을 내려도 위에 떠있는 메뉴

원 위치에 있다, 지정한 지점을 지나면 

메뉴가 화면 위로 떠 오르는 효과.

스크롤을 원 위치로 가면 메뉴도 원 위치로

 

 

 

.sub_an_menu {
    list-style: none; /* 리스트 기호 제거 */
    display: flex; /* 요소들을 수평으로 배열 */
    float:left;
    margin:20px 0 0px 30px ; 
    border:0px solid RED;
    text-align:center;
    position: absolute;

}

.sub_an_menu li {
  margin-right: 20px; /* 메뉴 간격 조정 */
}

.sub_an_menu li:last-child {
  margin-right: 0;
}

.sub_an_menu li a {
  display: block;
  padding: 13px;
  background-color: #eee; /* 배경색 지정 */
  color: #333; /* 글자색 지정 */
  text-decoration: none;
}

.sub_an_menu  li a:hover {
  background-color: #333; /* 마우스 오버시 배경색 지정 */
  color: #fff; /* 마우스 오버시 글자색 지정 */

}


.sub_an_menu.an {
    position: fixed;
    top: -20px;
    text-align:center;
    z-index:999;
    background-color: #fff;
    width:950px;
    height:50px;
    margin-left:0px;
    align-items: center;  /* 수직 중앙 정렬 */
    justify-content: center; /* 수평 중앙 정렬 */  
    border:0px solid #999999; 
}

<ul class="sub_an_menu">
    <li><a href="#1">메뉴1</a></li>
    <li><a href="#2">메뉴2</a></li>
    <li><a href="#3">메뉴3</a></li>
    <li><a href="#4">메뉴4</a></li>
    <li><a href="#5">메뉴5</a></li>
    <li><a href="#6">메뉴6</a></li>
    <li><a href="#7">메뉴7</a></li>
    <li><a href="#8">메뉴8</a></li>
</ul>