고정 페이지 헤더가 인 페이지 앵커와 겹칩니다.

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에서는 작동하지 않습니다.

CSS 스크롤 스냅 사양 이 게임에 등장 함에 따라scroll-margin-top 속성으로 합니다. 현재 Chrome 및 Opera (2019 년 4 월)에서 실행됩니다. 또한 Safari 11 이상이 지원해야하지만 Safari 11에서 실행할 수 없었습니다. 아마도 사람들이 그것을 고칠 때까지 기다려야 할 것입니다.

코드 펜 예

body {
  padding: 0;
  margin: 0;
}

h1,
p {
  max-width: 40rem;
  margin-left: auto;
  margin-right: auto;
}
h1 {
  scroll-margin-top: 6rem; /* One line solution. :-) */
}
.header {
  position: sticky;
  top: 0;
  background-color: red;
  text-align: center;
  padding: 1rem;
}
.header .scroll {
  display: block;
  color: white;
  margin-bottom: 0.5rem;
}
.header .browsers {
  color: black;
  font-size: 0.8em;
}

<header class="header">
  <a class="scroll" href="#heading">Scroll to heading</a>
  <span class="browsers" >Chrome 69+, Opera 56+ and Safari 11+ only</span>
</header>
<p>
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
<h1 id="heading">What is Lorem Ipsum?</h1>
<p>
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
<p>
  

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent pulvinar eleifend dolor, in cursus augue interdum quis. Morbi volutpat pulvinar nisl et condimentum. Quisque elit lacus, egestas non ante sit amet, hendrerit commodo dui. Nunc ac sagittis dolor. Proin iaculis ante non est pharetra, et ullamcorper nisl accumsan. Aenean quis leo vel sapien eleifend aliquam. Pellentesque finibus dui ex, blandit tristique risus vestibulum vitae. Nam a quam ac turpis porta eleifend. Sed at hendrerit risus, ac efficitur ante. Aenean pretium justo feugiat condimentum consectetur. Etiam mattis urna id porta hendrerit.
</p>
<p>
Mauris venenatis quam sed egestas auctor. Fusce lacus eros, condimentum nec quam vel, malesuada gravida libero. Praesent vel sollicitudin justo. Donec mattis nisl id mauris scelerisque, quis placerat lectus scelerisque. Ut id justo a magna mattis luctus. Suspendisse massa est, pretium vel suscipit sit amet, iaculis at mi. Aenean vulputate ipsum non consectetur sodales. Proin aliquet erat nec mi eleifend, eu dapibus enim ultrices. Sed fringilla tortor ac rhoncus consectetur. Aliquam aliquam orci ultrices tortor bibendum facilisis.
</p>
<p>
Donec ultrices diam quam, non tincidunt purus scelerisque aliquam. Nam pretium interdum lacinia. Donec sit amet diam odio. Donec eleifend nibh ut arcu dictum, in vulputate magna malesuada. Nam id dignissim tortor. Suspendisse commodo, nunc sit amet blandit laoreet, turpis nibh rhoncus mi, et finibus nisi diam sed erat. Vivamus diam arcu, placerat in ultrices eu, porta ut tellus. Aliquam vel nisi nisi.
</p>
<p>
Integer ornare finibus sem, eget vulputate lacus ultrices ac. Vivamus aliquam arcu sit amet urna facilisis consectetur. Sed molestie dolor et tortor elementum, nec bibendum tortor cursus. Nulla ipsum nulla, luctus nec fringilla id, sagittis et sem. Etiam at dolor in libero pharetra consequat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse quis turpis non diam mattis varius. Praesent at gravida mi. Etiam suscipit blandit dolor, nec convallis lectus mattis vitae. Mauris placerat erat ipsum, vitae interdum mauris consequat quis. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
<p>
Nunc efficitur scelerisque elit. Integer ac massa ipsum. Cras volutpat nulla purus, quis molestie dolor iaculis eget. Maecenas ut ex nulla. Pellentesque sem augue, ornare ut arcu eu, porttitor consectetur orci. Aenean iaculis blandit quam, in efficitur justo sodales auctor. Vivamus dignissim pellentesque risus eget consequat. Pellentesque sit amet nisi in urna convallis egestas vitae nec mauris. 
</p>

Chrome / Safari / Firefox의 경우 다음 display: block과 같이 a를 추가 하고 음수 여백을 사용하여 오프셋을 보정 할 수 있습니다 .

a[name] {
    display: block;
    padding-top: 90px;
    margin-top: -90px;
}

http://codepen.io/swed/pen/RrZBJo 예를 참조 하십시오

jQuery를 사용하여이를 수행 할 수 있습니다.

var offset = $('.target').offset();
var scrollto = offset.top - 50; // fixed_top_bar_height = 50px
$('html, body').animate({scrollTop:scrollto}, 0);

나를 위해 매력처럼 작동하는 또 다른 순수한 CSS 솔루션을 발견했습니다!

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

이 사이트 에서 찾았습니다 !

당신은 이것을 시도 할 수 있습니다 :

<style>
h1:target { padding-top: 50px; }
</style>

<a href="#bar">Go to bar</a>

<h1 id="bar">Bar</h1>

상단 패딩 값을 헤더의 실제 높이로 설정하십시오. 이렇게하면 헤더 상단에 약간의 추가 간격이 생길 수 있지만 사용자가 앵커로 이동 한 다음 위로 스크롤 할 때만 표시됩니다. 나는 지금 내 사이트에 대한 솔루션을 구성했지만 페이지 상단에 작은 고정 막대 만 표시합니다.

위에서 언급 한 "anchor : before"방법을 사용하여 CSS 및 HTML로 쉽게 작업 할 수 있습니다. 나는 그것이 div 사이에 거대한 패딩을 생성하지 않기 때문에 가장 잘 작동한다고 생각합니다.

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

페이지의 첫 번째 div에서는 작동하지 않는 것 같지만 첫 번째 div에 패딩을 추가하여 그에 대응할 수 있습니다.

#anchor-one{padding-top: 60px;}

작동하는 바이올린은 다음과 같습니다. http://jsfiddle.net/FRpHE/24/

그것은 나를 위해 작동합니다 :

앵커에 대한 HTML 링크 :

<a href="#security">SECURITY</a>

HTML 앵커 :

<a name="security" class="anchor"></a>

CSS :

.anchor::before {
    content: "";
    display: block;
    margin-top: -50px;
    position: absolute;
}

@Jpsy의 답변을 사용하고 있지만 성능상의 이유로 URL에 해시가있는 경우에만 타이머를 설정합니다.

$(function() {
      // Only set the timer if you have a hash
      if(window.location.hash) {
        setTimeout(delayedFragmentTargetOffset, 500);
      }
  });

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

북마크 된 앵커가 FAQ 페이지의 섹션 헤더이므로 여기 및 다른 곳에서 많은 답변에 많은 어려움을 겪었습니다. 따라서 나머지 내용은 그대로 유지했기 때문에 헤더를 오프셋하는 것이 도움이되지 않았습니다. 그래서 나는 게시 할 것이라고 생각했다.

내가 한 일은 몇 가지 솔루션의 합성이었습니다.

1. CSS :

   .bookmark {
       margin-top:-120px;
       padding-bottom:120px; 
       display:block;
   }

여기서 "120px"는 고정 헤더 높이입니다 (어쩌면 약간의 여백).

2. 북마크 링크 HTML :

   <a href="#01">What is your FAQ question again?</a>

3. 북마크 된 콘텐츠 HTML :

   <span class="bookmark" id="01"></span>
   <h3>What is your FAQ question again?</h3>
   <p>Some FAQ text, followed by ...</p>
   <p>... some more FAQ text, etc ...</p>

이 솔루션의 좋은 점은 span요소가 숨겨져있을뿐 아니라 본질적으로 축소되어 내용을 채우지 않는다는 것입니다.

이 솔루션은 다양한 리소스로 구성되어 있기 때문에이 솔루션에 대해 많은 신용을 얻을 수는 없지만 제 상황에서 가장 효과적이었습니다.

실제 결과는 여기에서 볼 수 있습니다 .

위의 답변으로 운이 없었고 완벽하게 작동하는이 솔루션을 사용했습니다 ...

앵커를 설정하려는 빈 스팬을 만듭니다.

<span class="anchor" id="section1"></span>
<div class="section"></div>

그리고 다음 수업을 적용하십시오.

.anchor {
  display: block;
  height: 115px;       /* same height as header */
  margin-top: -115px;  /* same height as header */
  visibility: hidden;
}

이 솔루션은 섹션의 배경색이 다른 경우에도 작동합니다! 이 링크 에서 해결책을 찾았습니다 .

내 순수한 마음에는 다소 해킹 적이지만 CSS 전용 솔루션으로 :target선택기를 사용하여 활성 고정 요소에 패딩을 추가 할 수 있습니다 .

html, body {height:100%; min-height:100%; margin:0;}
body {min-height:200%;}
header {display:inline-block; position:fixed; font-size:1.5em; height:100px; top:0; left:0; right:0; line-height:100px; background:black; text-align:center;}
header a {color:#fff;}
section {padding:30px; margin:20px;}
section:first-of-type, section:target {padding-top:130px;}

<header><a href="#one">#One</a> <a href="#two">#two</a> <a href="#three">#three</a></header>
<section id="one"><h1>One</h1>Aenean lacinia bibendum nulla sed consectetur. Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</section>
<section id="two"><h1>Two</h1>Aenean lacinia bibendum nulla sed consectetur. Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</section>
<section id="three"><h1>Three</h1>Aenean lacinia bibendum nulla sed consectetur. Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</section>

나는 내가 사용했던 발견 모두 MutttenXd 의와 Badabam 에 첫 번째로 크롬에서 작동하지 않았다 두 번째 파이어 폭스에서 작동하지 그랬던 것처럼, 서로의 CSS 솔루션 :

a.anchor { 
  padding-top: 90px;
}

a.anchor:before { 
  display: block;
  content: "";
  height: 90px;
  margin-top: -90px;
}

<a class="anchor" name="shipping"></a><h2>Shipping (United States)</h2>
...

내가 가장 깨끗하게 찾는 방법은 다음과 같습니다.

  #bar::before {
    display: block;
    content: " ";
    margin-top: -150px;
    height: 150px;
    visibility: hidden;
    pointer-events: none;
  }

jQuery를 사용한 최소한의 접근 방식 :

링크:

<a href="#my-anchor-1" class="anchor-link">Go To Anchor 1</a>

함유량:

<h3 id="my-anchor-1">Here is Anchor 1</a>

스크립트:

$(".anchor-link").click(function() {
    var headerHeight = 120;
    $('html, body').stop(true, true).animate({
        scrollTop: $(this.hash).offset().top - headerHeight
    }, 750);
    return false;
});

앵커 링크 클래스를 링크에 할당하면 다른 링크 (예 : 아코디언 또는 탭 컨트롤)의 동작에는 영향을 미치지 않습니다.

질문은 자바 스크립트를 원하지 않지만 다른 인기있는 질문 은이 질문 으로 인해 닫혀서 대답 할 수 없었습니다.

인바운드 링크, 페이지의 링크 및 JS가 타겟팅 할 수있는 페이지가 헤더 높이의 변경에 응답 할 수있는 것이 필요했습니다.

HTML

<ul>
  <li><a href="#ft_who">Who?</a></li>
  <li><a href="#ft_what">What?</a></li>
  <li><a href="#ft_when">When?</a></li>
</ul>
...
<h2 id="ft_who" class="fragment-target">Who?</h2> 
...
<a href="#">Can I be clicked?</a>
<h2 id="ft_what" class="fragment-target">What?</h2>
...
<h2 id="ft_when" class="fragment-target">When?</h2> 

CSS

.fragment-target {
    display: block;
    margin-top: -HEADER_HEIGHTpx;
    padding-top: HEADER_HEIGHTpx;
    z-index: -1;
}

그만큼 z-index: -1 그의 대답 @MuttenXd에 의해 주석으로, 단편 대상 위 '패딩 영역 "링크가 여전히 클릭 할 수있게

IE 11, Edge 15+, Chrome 38+, FF 52+ 또는 Safari 9.1+에서 아직 문제를 찾지 못했습니다.

<div style="position:relative; top:-45px;">
    <a name="fragment"> </a>
</div>

이 코드는 트릭을 수행해야합니다. 헤더 바의 높이를 45px로 바꾸십시오.

편집 : jQuery를 사용하는 것이 옵션 인 경우 오프셋 값이 설정된 jQuery.localScroll을 성공적으로 사용했습니다. 오프셋 옵션은 jQuery.localScroll을 기반으로하는 jQuery.scrollTo의 일부입니다. 데모는 http://demos.flesler.com/jquery/scrollTo/('offset '아래의 두 번째 창)에 있습니다.

다음은 IE에서 작동하는 완전한 jquery 솔루션입니다.

탐색 막대 요소가 다음과 같다고 가정하십시오.

<ul>
    <li><a class="navigation" href="/#contact-us">Contact us</a></li>
    <li><a class="navigation" href="/#about-us">About us</a></li>
</ul>

다음 jquery 스 니펫을 사용하여 스크롤을 오프셋 할 수 있습니다.

$(function() {
    $("a.navigation").click(function(event) {
        event.preventDefault();
        offSetScroll($(this));
    });
    offSetScrollFromLocation(window.location.href.toLowerCase());
});

function offSetScroll(anchor) {
    var href = anchor.attr("href");
    offSetScrollFromLocation(href);
}

function offSetScrollFromLocation(href) {
    //Change this according to the height of the navigation bar
    var fromTop = 250;
    if(href.indexOf("#")<=0)
        return;
    var hash=href.substring(href.indexOf("#"));
    var targetOffset = $(hash).offset().top-fromTop;
    $('html, body').animate({scrollTop: targetOffset}, 400, function(e) {

    });
}

:before의사 요소가 의사 요소 영역 내에 있는 포인터 이벤트를 실제로 덮고 차단하고 있음을 알 때까지는 사용이 훌륭하게 작동했습니다 . 같은 사용 pointer-events: none상의 :before앵커에 또는 직접 더 영향을했다합니다.

우리가 한 일은 앵커의 위치를 ​​절대적으로 만든 다음 고정 영역의 오프셋 / 높이가되도록 위치를 조정하는 것이 었습니다.

포인터 이벤트를 차단하지 않는 오프셋 앵커

.section-marker {

    position: absolute;
    top: -300px;
}

이것의 가치는 300px에 포함될 수있는 요소를 차단하지 않는다는 것입니다. 단점은 Javascript에서 해당 요소의 위치를 ​​파악할 때 오프셋을 고려해야하므로 로직이 조정되어야한다는 것입니다.

이것은 탐색을 클릭 할 때 마침내 올바른 장소로 이동하는 방법입니다. 탐색 클릭에 대한 이벤트 핸들러를 추가했습니다. 그런 다음 "scrollBy"를 사용하여 오프셋에서 위로 이동할 수 있습니다.

var offset = 90;

 $('.navbar li a').click(function(event) {
    event.preventDefault();
    $($(this).attr('href'))[0].scrollIntoView();
    scrollBy(0, -offset);
 });

몇 줄 바꿈으로 div를 만들고 ID를 주면 아래에 표시하려는 코드를 넣습니다. 그러면 링크가 이미지 위의 공간으로 이동하고 헤더가 더 이상 방해가되지 않습니다.

<a href="#image">Image</a>
<div id="image"><br><br></div>
<img src="Image.png">

물론 필요에 따라 줄 바꿈 수를 변경할 수 있습니다. 이것은 나를 위해 완벽하게 작동했지만 문제가 있는지 확실하지 않지만 여전히 HTML을 배우고 있습니다.

이 스크립트를 사용

$(document).on('click', 'a[href^="#"]', function (event) {
    event.preventDefault();

    $('html, body').animate({
        scrollTop: $($.attr(this, 'href')).offset().top -140
    }, 1000);
});

이 방법이 더 유용하다고 생각합니다.

<h2 id="bar" title="Bar">Bar</h2>

[id]:target {
    display: block;
    position: relative;
    top: -120px;
    visibility: hidden;
}

[id]:target::before {
    content: attr(title);
    top: 120px;
    position: relative;
    visibility: visible;
}

이제 scroll-margin-top을 사용할 수 있습니다 . 이것은 꽤 널리 채택되었습니다 .

스크롤하려는 요소에 다음 CSS를 추가하기 만하면됩니다.

.element {
  scroll-margin-top: 2em;
}