---

Sticky Header

모바일버전 Sticky Header

모바일버전의 헤더는 크기도 크지 않고, 심플하기 때문에 헤더에 그대로 position: sticky 를 적용했다.

.header {
  position: sticky;
  top: 0px;
  height: 60px;
  margin: 0px;
  justify-content: space-between;
  border-bottom: 1px #e5e5e5 solid;
}

PC버전 Sticky Header

PC버전은 조금 고민이 많았다.
헤더 높이가 너무 높아서 투박하기도 하고 그대로 고정이 되면 컨텐츠를 너무 많이 가려서 사용자가 불편함을 느낄것 같았다.
때문에 작은 사이즈의 스티키용 헤더를 새로 만들기로 했다.

display와 visibility

스티키 헤더를 새로 만들고 미디어 쿼리를 이용해 PC버전에서만 표시되게 설정했다.
모바일 버전은 필요가 아에 없기에 랜더트리에 포함 시키지 않는 display: none 설정했다.
PC 버전은 JS기능 추가를 위해 visibility: hidden 설정을 했다.(랜더트리에 존재해야 dom이용 가능)

.sticky-header {
  display: flex;
  visibility: hidden;
  position: fixed;
  top: 0px;
  height: 0px;
  overflow: hidden;
}
@media all and (max-width: 767px) {
  .sticky-header {
    display: none;
  }
}

Scroll Event

JS에서 addEventListener 에 scroll 이벤트를 이용해서 조건에 따라 기능이 작동하도록 구성했다.
스티키 헤더의 표시 조건은 네비게이션이 가려지는 시점이다.
window.pageYOffset, offsetHeight, offsetTop 을 이용하면 간단하게 조건을 만들 수 있다.
조건을 충족하면 스티키 헤더 visibility: visible 을 적용한다.

window.addEventListener('scroll', () => {
  if (
    window.pageYOffset >
    document.querySelector('.navigation').offsetHeight +
      document.querySelector('.navigation').offsetTop
  ) {
    document.querySelector('.sticky-header').style.visibility = 'visible';
    document.querySelector('.sticky-header').style.height = '60px';
  } else {
    document.querySelector('.sticky-header').style.visibility = 'hidden';
    document.querySelector('.sticky-header').style.height = '0px';
  }
});

✅

---

Repository를 보고 싶다면 GitHub을 참고하세요.