스크롤 내려갈 때 상단 메뉴 고정시키기
최상단 메뉴바를 고정 시키는 방법은 알고 있었는데 중간에 위치한 메뉴를 고정 시켜야 할 일이 있어서 찾아보다 발견한 Sticky 라는 옵션입니다.
Sticky 사용해 상단 메뉴 고정 시키기
먼저 쭉 나열한 HTML 코드를 준비하고 내용을 입력해 놨습니다. (페이지를 아래로 스크롤 할만한 양이 있어야 하기에)
그리고 2번째 P태그에 ID를 지정해주고 CSS에서 stickyTest 라고 지정한 ID에 position: sticky; 지정해주면 준비는 끝납니다.
 |
| 간단하게 테스트 해보게 꾸며봤습니다 |
스크롤을 아래로 내려 보면 2번째 P태그인 menu 라고 써진 부분을 지나가면서 menu 가 상단에 붙게 됩니다.
 |
| 스크롤을 내려보면 menu 가 상단에 붙습니다 |
사용 시 주의해야 할 점은 스크롤 되는 페이지의 내용들은 같은 부모 태그 요소 안에서만 사용된다는 점입니다.