헤더가 fixed, sticky일 때 내부 링크로 이동시키면 위치가 안맞는 문제 해결방법

사이트의 헤더가 fixed, sticky일 경우에 페이지 내부 링크를 걸어서 페이지 내에서 이동시키려고 하면 fixed로 고정되어 있는 헤더의 높이를 감안하지 않기 때문에 자기가 원하는 위치로 이동 하지 않는 문제가 생깁니다.

See the Pen
inner link by Bong yiroon (@boltmanber)
on CodePen.

이럴 경우 CSS 로 해결하는 법과 jQuery로 해결하는 법, 이렇게 2가지가 있습니다.

CSS로 해결하기

원하는 타겟을 margin-top: -○○px 형식으로 헤더 높이만큼 올리고, 다시 padding-top:○○px 로 다시 원래 자리로 돌려주는 방법입니다. (타겟의 머리통을 늘려주는 효과)

See the Pen
inner link with css by Bong yiroon (@boltmanber)
on CodePen.

CSS의 여기가 중요！

.height_fix {
    margin-top: -70px;
    padding-top: 70px;
}

원하는 타겟에 일일이 적용을 위한 클래스를 붙여줘야하는데다, 헤더 높이를 변경했다면 CSS도 수정해줘야 한다는 번거로움이 있습니다.

jQuery로 해결하기

</body> 태그 앞에 다음 스크립트를 넣어주면 한방에 해결됩니다.
헤더 사이즈도 자동으로 계산해주고 주루룩 미끌어지며 이동하는 에니메이션 효과도 생기니 개인적으로는 이 쪽을 추천드립니다.

See the Pen
inner link with jQuery by Bong yiroon (@boltmanber)
on CodePen.

간단히 설명을 하자면,

// 헤더 높이 구하기. outerHeight()를 쓰는 것이 중요!
var headerHeight = $("header").outerHeight();
// 버튼의 링크 구하기
var href = $(this).attr("href");
// 링크대상 DOM 구하기
var target = $(href == "#" || href == "" ? "body" : href);
// 링크대상 DOM의 height위치 구하기
var position = target.offset().top - headerHeight;
// 에니메이션 효과를 넣어서 그 DOM으로 이동시키기
$("html, body").animate({ scrollTop: position }, 600, "swing");

최근 css에서 position:sticky의 사용빈도가 들어가고 있으니 유용하실 겁니다.
뭐, 언제다 그렇듯 sticky는 ie11에선 못 쓰지만요 ㅋㅋ
빨리 없어져주라… ie11…

Buy me a coffee