sticky·fixed 위치는 헤더의 실제 높이를 CSS 변수로 받아 쓴다

데스크톱에서 잘 붙어 있던 sticky 툴바가 모바일에서는 헤더 뒤로 반쯤 숨는다. 앵커 링크로 이동하면 제목이 헤더에 가려진다.

원인은 top: 64px처럼 헤더 높이를 숫자로 박은 것이다. 모바일에서는 메뉴가 두 줄로 접히거나 글자가 커져 헤더가 높아지는데, 아래 요소들은 여전히 64px만 비켜 선다.

헤더가 제 높이를 직접 재서 CSS 변수로 알리고, 아래 요소들은 그 변수를 쓴다. ResizeObserver를 쓰면 화면 회전이나 글자 크기 변경에도 따라간다.

const header = document.querySelector<HTMLElement>('.site-header')!;

new ResizeObserver(([entry]) => {
  const h = entry.borderBoxSize[0].blockSize;
  document.documentElement.style.setProperty('--header-h', `${h}px`);
}).observe(header);

:root {
  --header-h: 64px; /* 스크립트가 돌기 전 기본값 */
}
.toolbar {
  position: sticky;
  top: var(--header-h);
}
h2[id] {
  scroll-margin-top: var(--header-h); /* 앵커 이동 때 가리지 않게 */
}