공통 컴포넌트인 Header가 페이지마다 다르게 나오는 현상

<기존 코드>

const HeaderContainer = styled.header`
  position: sticky;
  min-width: auto;
  width: 100%;
  height: 3.5rem;
  display: flex;
  align-items: center;
  border-top: 3px solid var(--orange);
  border-bottom: 1px solid var(--black-100);
  box-sizing: border-box;
  top: 0;
  background-color: var(--white);
  z-index: 9999;
`;​

 

1. Header의 높이가 페이지마다 달라지는 현상 발생

 

: 처음엔 별 문제없어 보였으나, 게시글을 여러개 가져와서 스크롤이 생기는 페이지에서 Header의 높이가 달라지는 현상이 발생하였다. 스크롤이 없는 로그인이나 회원가입 페이지와 스크롤이 있는 페이지들의 body의 길이가 달라져서 그런 현상이 발생한듯 하다.아래 코드처럼 min-height를 추가하여 간단하게 해결하였다.(해결과정은 간단하지 않았지만...)

2. 스크롤을 올릴때 Header도 같이 올라가는 현상 발생

: 스크롤을 올릴 때 Header도 같이 올라가는 현상이 발생하여서 position을 fixed로 변경해주었다. 도대체 그럼 언제 sticky를 써야하는 걸까? 설명을 읽어봐도 아직은 이해가 잘 되질 않는다. 언젠가 직접 사용할 때 깨닫게 되겠지? 아무튼 Header는 fixed임을 기억해두자.

시간이 좀 지나서 알게된 사실인데 fixed만 사용해주면 min-height를 사용하지 않아도 1번 문제는 해결되는 거였다!!

 

 

<수정된 코드>

const HeaderContainer = styled.header`
  position: fixed;
  min-width: auto;
  width: 100%;
  height: 3.5rem;
  min-height: 56px;
  display: flex;
  align-items: center;
  border-top: 3px solid var(--orange);
  border-bottom: 1px solid var(--black-100);
  box-sizing: border-box;
  top: 0;
  background-color: var(--white);
  z-index: 9999;
`;