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

2019. 9. 16. 22:17 | 댓글 6

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

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

현재 이 블로그에서는 w3schools.com에서 제공하는 코드를 사용하여 화면을 아래로 스크롤할 때 메뉴를 고정하도록 만들었습니다. 스킨의 제약 때문에 조금 엉성하지만 개인용 블로그이기 때문에 그냥 사용해도 무방할 것 같습니다. 소스는 다음 문서에 나와 있습니다.

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

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

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

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

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

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

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

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

참고:

  • 네이버 블러그 공유하기
  • 네이버 밴드에 공유하기
  • 페이스북 공유하기
  • 트위터 공유하기
  • 카카오스토리 공유하기

댓글을 달아 주세요

">
  1. thumbnail
    IT세레스

    나중을 위해서 소스 테스트 해가며 메모해둬야겠습니다.
    감사합니다.

  2. thumbnail
    공수래공수거

    스크롤할때 상단 메뉴를 고정할수 있군요,,
    알아두겠습니다.^^

  3. thumbnail
    내로라하다

    멋집니다. 이게 티스토리의 매력이죠^^ 그 매력을 또 업그레이드 해주셨군요 ㅋㅋ