이 문제는 스티키 아바타와 무관하다고 생각합니다.
헤더가 축소되면 페이지 높이가 줄어들고, 페이지의 스크롤 위치가 변경됩니다. 그 결과 헤더가 축소되어야 하는 위치에서 페이지가 왔다 갔다 하면서 깜빡임 현상이 발생합니다.
페이지의 스크롤 위치를 브라우저 콘솔에 출력하면 이 현상을 직접 확인할 수 있습니다… 헤더가 약 60px 축소되고, 이것이 깜빡임으로 인해 스크롤 위치에 반영됩니다:
이를 해결하기 위해 JS에서 헤더 전환이 일어나는 시점에 높이의 차이를 스크롤 위치에 더하는 방법이 있을 것입니다.
CSS만 사용하여 이 문제를 해결하는 또 다른 방법은 다음과 같습니다:
.d-header-wrap {
// 헤더를 고정 위치로 설정하여 페이지 높이에 포함되지 않도록 합니다
position: fixed;
width: 100%;
}
#main-outlet {
// 고정 위치로 인해 헤더가 콘텐츠 위에 오기 때문에,
// 큰 헤더의 높이만큼 페이지 콘텐츠를 오프셋합니다
padding-top: 150px !important;
}