Header Fixed

Header가 다음과 같은 구조를 갖는다고 생각해 보자.

 

<header class="header">
  <div class="header__wrapper">
      ...
  </div>
</header>

Header는 스크롤 이벤트에 따라 position이 변경된다.

 

 

즉 기존의 HTML 구조에서 독립적인 요소로 변경된다는 것이다.

 

 

예를 들어 scrollY 값이 0이 아닌 경우 header 태그에. sticky css를 적용시킨다고 가정해 보자.

 

 

.sticky {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 11;
}

header에는 아무런 css를 설정하지 않았다고 하자.

 

이 결과는 갑자기 Header가 툭 끊어지는 느낌과 하위 콘텐츠가 위로 확 올라가는 느낌을 받는다.

 

붙을 때도 마찬가지로 header 요소가 위로 휙 끊어져서 붙는 것처럼 보이며 하위 콘텐츠가 아래로 확 내려가는 끊어짐 현상을 보여준다.

 

이를 해결하기 위해 나는 header__wrapper에. sticky class를 붙여주기로 했다.

 

생각해 보자.

 

사용자의 스크롤 이벤트가 발생한다.

 

만약 header에 자체 height 속성이 없다면, header__wrapper가 position이 fixed로 변경되는 순간.

 

동일한 현상이 발생할 것이다.

 

그래서 다음과 같이 수정했다.

header {
    height: 40px;
}

 

header에 기본 높이를 가지도록 만들었다. 이 높이는 header__wrapper의 크기와 같다.

 

header가 기본 크기를 가짐에 따라 header__wrapper의 position 값이 fixed로 변경되어도 기본 높이를 유지할 수 있어 이전과 같은 끊김 현상이 제거되었다.