고정 페이지 헤더가 인 페이지 앵커와 겹칩니다. : 올바른 : + ——————————— +

HTML 페이지에 스크롤되지 않는 헤더가 있고 높이가 정의되어 있고 높이가 정의 된 경우 :

URL 앵커 ( #fragment부분)를 사용하여 브라우저가 페이지의 특정 지점으로 스크롤되도록하지만 JavaScript의 도움없이 고정 요소의 높이를 존중하는 방법이 있습니까?

http://foo.com/#bar
잘못된 (그러나 일반적인 동작) : 올바른 :
+ --------------------------------- + + -------------- ------------------- +
| BAR ////////////////////// 헤더 | | ///////////////////////// 헤더 |
+ --------------------------------- + + -------------- ------------------- +
| 여기에 나머지 텍스트가 있습니다 | | 바 |
| ... | | |
| ... | | 여기에 나머지 텍스트가 있습니다 |
| ... | | ... |
+ --------------------------------- + + -------------- ------------------- +

답변

나는 같은 문제가 있었다. 상단 막대 높이를 패딩 ​​최고 값으로 앵커 요소에 클래스를 추가하여 문제를 해결했습니다.

<h1><a class="anchor" name="barlink">Bar</a></h1>

그리고 간단하게 CSS :

.anchor { padding-top: 90px; }

답변

새 클래스를 설정할 수 없거나 설정하지 않으려면 CSS ::before의 :target의사 클래스에 고정 높이 의사 요소를 추가하십시오 .

:target::before {
  content: "";
  display: block;
  height: 60px; /* fixed header height*/
  margin: -60px 0 0; /* negative fixed header height */
}

또는 :targetjQuery 를 사용 하여 페이지를 스크롤하십시오 .

var offset = $(':target').offset();
var scrollto = offset.top - 60; // minus fixed header height
$('html, body').animate({scrollTop:scrollto}, 0);

답변

나는이 접근법을 사용한다 :

/* add class="jumptarget" to all targets. */

.jumptarget::before {
  content:"";
  display:block;
  height:50px; /* fixed header height*/
  margin:-50px 0 0; /* negative fixed header height */
}

각 대상 앞에 보이지 않는 요소를 추가합니다. IE8 이상에서 작동합니다.

더 많은 솔루션이 있습니다 :
http://nicolasgallagher.com/jump-links-and-viewport-positioning/

답변

공식 부트 스트랩 채택 답변 :

*[id]:before {
  display: block;
  content: " ";
  margin-top: -75px; // Set the Appropriate Height
  height: 75px; // Set the Appropriate Height
  visibility: hidden;
}

크레딧

병합

답변

html {
  scroll-padding-top: 70px; /* height of sticky header */
}

에서 : https://css-tricks.com/fixed-headers-on-page-links-and-overlapping-content-oh-my/

답변

이 문제를 해결하는 가장 좋은 방법은 (고정 요소 높이로 65px를 대체하는 것)입니다.

div:target {
  padding-top: 65px;
  margin-top: -65px;
}

대상 선택기 를 사용하지 않으려면 다음과 같이 할 수도 있습니다.

.my-target {
    padding-top: 65px;
    margin-top: -65px;
}

참고 : 대상 요소의 배경색이 부모와 다른 경우이 예제는 작동하지 않습니다. 예를 들면 다음과 같습니다.

<div style="background-color:red;height:100px;"></div>
<div class="my-target" style="background-color:green;height:100px;"></div>

이 경우 내 대상 요소의 녹색이 부모 빨간색 요소를 65px로 덮어 씁니다. 이 문제를 처리 할 순수한 CSS 솔루션을 찾지 못했지만 다른 배경색이 없으면이 솔루션이 가장 좋습니다.

답변

제안 된 솔루션 중 일부는 동일한 페이지 내 에서 조각 링크 (= 해시 링크) 에서 작동하지만 ( 아래로 스크롤되는 메뉴 링크와 같이) 다른 브라우저 에서 오는 조각 링크를 사용하려고 할 때 현재 Chrome에서 작동하지 않는 것으로 나타났습니다. 페이지 .

따라서 www.mydomain.com/page.html#foo를 처음부터 호출 해도 주어진 CSS 솔루션 또는 JS 솔루션으로 현재 Chrome의 타겟을 상쇄 하지 않습니다 .

문제에 대한 세부 정보를 설명 하는 jQuery 버그 보고서 도 있습니다.

해결책

지금까지 Chrome에서 실제로 작동하는 유일한 옵션은 onDomReady가 아니라 지연 된 JavaScript입니다.

// set timeout onDomReady
$(function() {
    setTimeout(delayedFragmentTargetOffset, 500);
});

// add scroll offset to fragment target (if there is one)
function delayedFragmentTargetOffset(){
    var offset = $(':target').offset();
    if(offset){
        var scrollto = offset.top - 95; // minus fixed header height
        $('html, body').animate({scrollTop:scrollto}, 0);
    }
}

요약

JS 지연 솔루션이 없으면 Firefox, IE, Safari에서는 작동하지만 Chrome에서는 작동하지 않습니다.