화면을 아래로 스크롤할 때 상단 메뉴를 고정하는 방법 (자바스크립트)

워드프레스 정보를 제공하는 블로그 Avada 2019. 9. 16. 22:17 • 댓글:

화면을 스크롤할 때 상단 메뉴를 고정하고 싶은 경우가 있습니다. 이 경우 구글을 검색하면 다양한 자료를 찾을 수 있습니다.

자바스크립트를 사용하여 화면을 아래로 스크롤할 때 상단 메뉴를 고정하기

이 티스토리 블로그에는 최근 공개된 Book Club (북 클럽) 이라는 스킨이 적용되어 있습니다. 북 클럽 스킨에서는 화면을 아래로 스크롤할 때 메뉴가 상단에 고정되지 않습니다. 

현재 이 블로그에서는 w3schools.com에서 제공하는 코드를 사용하여 화면을 아래로 스크롤할 때 메뉴를 고정하도록 만들었습니다. 스킨의 제약 때문에 조금 엉성하지만 개인용 블로그이기 때문에 그냥 사용해도 무방할 것 같습니다. 소스는 다음 문서에 나와 있습니다. (업데이트: 이 글을 작성한 이후에 스킨을 고래스킨으로 변경했습니다. 상단 메뉴는 동일한 방식으로 스크롤 시에 고정하도록 했습니다.)

다음 jsfiddle에서 작동을 확인할 수 있습니다.

마우스를 아래로 스크롤하면 메뉴가 상단에 고정됩니다. 마우스를 다시 위로 스크롤하면 원래대로 복귀됩니다.

화면을 스크롤할 때 상단 메뉴 고정하기

티스토리에 적용하려는 경우 메뉴 부분 태그에 CSS id를 추가하고, 제시된 CSS 코드와 자바스크립트 코드를 사용하면 됩니다. 자바스크립트 코드는 </body> 바로 위에 입력하도록 합니다.

티스토리에서 자바스크립트 코드 추가하기
티스토리에서 자바스크립트 코드를 /body 바로 앞에 추가한다.

CSS 코드는 위의 그림에서 상단의 CSS 탭을 클릭하여 입력하도록 합니다. CSS에 대해 조금 알면 별 어려움 없이 가능할 것입니다. (기본적인 CSS는 시중에서 책을 하나 구입하거나 무료 온라인 강의(예: 생활코딩)를 보면 도움이 될 것입니다.)

메뉴가 미디엄 Medium 처럼 작동하도록 만들고 싶은 경우 다음 글에서 제시하는 코드를 활용할 수 있습니다.

이외에도 구글에서 "sticky menu javascript"로 검색하면 다양한 문서가 검색됩니다. 마음에 드는 코드를 선택하여 활용할 수 있습니다.

참고: