내부 링크 시 헤더랑 화면 겹칩 현상

헤더를 고정 값 (position:fix) 로 맞추어 놓고 

내부 링크를 걸면 고정된 값 만큼 페이지가 겹치게 된다. 

스파이 스크롤이랑 같이 쓸때 엄청 신경 쓰인다. 

해결 방법

CSS로 조절하는 경우 

가장 위에 있는 테그에 다음과 같은 스타일을 넣어 해결 한다. 

1

#info {

2	margin-top: -180px;

3	padding-top: 180px;

4

}

 

javascript(jquery)로 조절 하는 경우

소스보기

인쇄SyntaxHighlighter 대해

1	// 내부 스크롤 이동

2	$(function () {

3	var headerHight = 180; //헤더 높이

4	$('a[href^=#]').click(function(){

5	var href= $(this).attr("href");

6	var target = $(href == "#" || href == "" ? 'html' : href);

7	var position = target.offset().top-headerHight; //헤더 높이 만큼 위치를 조절함

8	$("html, body").animate({scrollTop:position}, 550, "swing");

9	return false;

10

});

11

});

안움직이는 경우에는 버전을 확인해 주세요. 

최소 1.11.3 이상 

그리고 혹시 'a[href^=#]'  에서 에러 나시는 분은 

'a[href^="#"]' (""따옴표) 로 해보시면 됩니다. 

참조 : http://www.tam-tam.co.jp/tipsnote/html_css/post4776.html

미안해 그대로 배꼈어..