[Jekyll]상단 masthead 고정하기

1. 문제 상황

페이지를 아래로 내리면 masthead가 가려져서, 다시 masthead를 보기 위해 페이지 최상단까지 올라가야 하는 불편함이 있다. 따라서 본 포스팅에서는 상단 masthead를 고정하는 방법을 소개한다.

2. 시도한 방법들

2-1) fixed position

masthead의 element 속성을 보면, position이 relative로 되어있다.

처음에는, 다음과 같이 position을 fixed로 지정하여 디바이스의 최상단으로 부터 x=100px만큼 떨어지게 표현하고자 하였다.

문제점

fix가 되긴 하지만, css 속성들이 깨져서 margin이 제대로 들어가지 않는 문제점이 있었다.

2-2) sticky position

따라서 position을 sticky로 지정하여 해당 문제를 해결하였다. position을 sticky로 설정하면, 해당 영역의 x 또는 y 값이 설정한 위치에 도달하기 전까지는 static으로, 넘어가면 fixed로 취급한다. top:0px로 놓으면 초기에는 static으로 보이다가 스크롤 하는 순간 fixed로 취급되어 masthead가 상단에 붙어있는 것처럼 보인다. 더불어서, background-color와 세부 요소들을 조금 더 수정해주면, masthead를 상단에 고정시킬 수 있다!

3. 코드

3-1) masthead css 수정

_sass/minimal-mistakes/_masthead.scss의 masthead에 대한 속성을 변경한다. position을 sticky로 바꾸어주고, top, background-color 속성을 부여한다. 이 때, color는 본인이 사용하고 있는 테마에 맞게 바꾸어주면 된다.

.masthead {
  position: sticky; // 이 부분 수정 default : relative
  top: 0px; // 이 부분 추가
  background-color: rgb(255,255,255); // 이 부분 추가
  border-bottom: 1px solid $border-color;
  -webkit-animation: $intro-transition;
  animation: $intro-transition;
  -webkit-animation-delay: 0.15s;
  animation-delay: 0.15s;
  z-index: 20;

3-2) 우측 sidebar css 수정

_sass/minimal-mistakes/_sidebar.scss의 sidebar__right 속성을 변경해준다. 본인의 경우에는 우측에 페이지 목차를 요약해주는 사이드 바를 사용하는데, 해당 사이드 바를 사용하지 않는 경우에는 바꾸어 줄 필요없다.

.sidebar__right {
  margin-bottom: 1em;

  @include breakpoint($large) {
    position: absolute;
    top: 0;
    right: 0;
    width: $right-sidebar-width-narrow;
    margin-right: -1 * $right-sidebar-width-narrow;
    padding-left: 1em;
    z-index: 10;

    &.sticky {
      @include clearfix();
      position: -webkit-sticky;
      position: sticky;
      top: 10em;  // 이 부분 수정 default : 2em
      float: right;

      .toc {
        .toc__menu {
          overflow-y: auto;
          max-height: calc(100vh - 7em);
        }
      }
    }
  }

3-3) 좌측 sidebar css 수정

_sass/minimal-mistakes/_utillities.scss의 sticky 속성을 변경해준다. 이 부분도 좌측 사이드바가 있는 경우에 바꾸어주면 된다.

.sticky {
  @include breakpoint($large) {
    @include clearfix();
    position: -webkit-sticky;
    position: sticky;
    top: 4em;  // 이 부분 수정 default : 2em

    > * {
      display: block;
    }
  }
}

4. 결과

스크롤을 내려도 masthead가 상단에 잘 붙어있다.