고정 페이지 헤더 및 인 페이지 앵커 대 Tripit 슬레이트

Question

이 질문은 URL이 점프 대상 일 때 고정 된 페이지 헤더 아래에서 해시 된 URL (예 : mydomain.com/somepage#SomeAnchor)을 스크롤하는 것에 관한 것입니다. 그것은 this answered question의 파생물입니다 -하지만 Tripit Slate docs-publishing 프레임 워크에서 완전히 작동 할 수있는 답변을 얻은 사람이 있는지 궁금합니다.

This Slate-based site이 우리 아니지만, 우리의 곤경을 보여줍니다 당신이 왼쪽 탐색 메뉴에서 링크를 클릭하면

• 를 중심 텍스트 열 스크롤 선택한 제목에 . 모든 것이 잘됩니다.

• 하지만 본문 텍스트의 링크를 클릭 해보십시오. 예 : http://buddycloud.com/api#accounts에서 push notification 링크를 클릭합니다. 완전히 다른 부제목으로 스크롤하십시오. 에 요청한 대상에 실제로 포커스가 있지만 상단의 탐색 바 아래에 숨겨져 있습니다. (당신이 그것을 볼 수 있습니다 스크롤합니다.)

우리 왼쪽 탐색 링크

이 buddycloud 사이트처럼 정상적으로 작동합니다. Sidnicious' 4086107 answer 덕분에 우리는 Nicolas Gallagher가 고안 한 것처럼 보이지 않는 의사 요소를 모든 머리글 위에 배치했습니다. 여기에 CSS 클래스의 :

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

그리고 여기에 우리는 우리의 제목에 적용하는 방법은 다음과 같습니다 왼쪽 탐색을 위해 잘 작동 무엇

## <span class="jumptarget" id="SomeAnchorName"> SomeHeading </span> 

된다.

링크가이 같은 해시가 포함 된 경우 : 그것은 그럼에도 불구하고 "의 페이지"해시 링크에 실패하는 이유는 CSS 트릭에서, 우리는 배운 <a href="#section-two">Section Two</a> 이 ... 브라우저 창 스크롤됩니다 .. . 해당 요소를 전체적으로 볼 수있는 최소 위치는 입니다. ... 브라우저 창의 위쪽 가장자리 인 으로 플러시합니다. 이것은 ... 고정 위치, 맨 위에 머물러있는 헤더의 경우에는 매우 문제가 될 수 있습니다.

실제로 우리의 고정식 상단 nav은 buddycloud (우리의 크기는 82px)와 비슷합니다. 그리고 우리의 인 페이지 해시 링크가 그 아래에 숨어 있습니다. 두 가지 중요한 예외를 제외하고

: 먼저, "해시"대상 URL 아웃 바운드 링크로 같은 인하 파일 내에있는 경우에, 목표는 명확하게 바로 왼쪽 탐색 링크로 고정 헤더 아래에서 피킹합니다 해야 할 것. (. 소스 측에서 슬레이트 저장 .md 파일과 같은 모든 컨텐츠)이 문제를 지역화 : 슬레이트는 별도의 대상 .md 파일을 통과해야하고, 다음 URL을 완료 #<SomeAnchorName>을 연결하는 곳 링크 대상이 만을 숨 깁니다.

둘째, 은으로, 모든 "페이지 내부"해시 링크가 Google의 상단 헤더를 지우는 해킹을 발견했습니다. 여기에는 두 개의 범위를 사용하여 제목을 HTML로 이중 태깅하는 것이 포함됩니다. 첫 번째는 빈 더미 스팬 (dummy span)이며 실제 헤딩 텍스트 위에 위치하여 스크롤 동작을 속입니다. (위의 jumptarget 클래스로 태그되었습니다.) 제목 자체에서 첫 번째 해킹에서 왼쪽 들여 쓰기를 수정하는 클래스와 별도의 범위를 적용합니다. 이중 태그 지정은 다음과 같습니다.

<h2> 
    <span class="jumptarget" id="bogusN"> &nbsp; </span> 
    <span class="jumpleft"> Bogus Heading 2 </span> 
</h2> 

하지만이 링크는 Google의 '페이지 내부'해시 링크를 나타내지 만, 왼쪽 탐색을 완전히 차단합니다. Slate의 tocify 왼쪽 탐색기 생성기와의 일부 상호 작용으로 인해 이러한 방식으로 태그 지정된 모든 제목은 다음과 같이 잘못 수행됩니다. (1) 왼쪽 탐색에서 자녀를 숨 깁니다. (2) 클릭하면 jumptarget 클래스가 상단 머리글 아래에서 스크롤되지 않도록합니다. (3) 클릭하면 왼쪽 탐색 메뉴에서 부모를 접습니다.

우리의 딜레마는 다음과 같습니다. 왼쪽 탐색 메뉴의 링크 수정으로 텍스트 링크가 깨졌습니다. 반면에, 텍스트 링크에 ​​대한 우리의 수정은 우리의 왼쪽 탐색 수정을 깨뜨린다.

누구나 Tripit Slate 또는 tocify 또는 다른 프레임 워크에서이를 전역 적으로 해결 한 경우 포인터에 대해 매우 감사하게 생각합니다. 깨끗한 CSS, hacky HTML 또는 jivey JavaScript - 우리는 불가지론 자입니다. 감사!

[업데이트 7/13/16 :] 개발자가 layout.erb에 추가 한 스크립트로 링크 대상이 영구 헤더에 의해 숨겨지지 않도록합니다. 모든 링크에서 작동하는지 테스트하고 있습니다. 댓글은 매우 초대 :

<script> 
    var container = $('.page-wrapper .content'); 
    var body = $('body'); 
    var headerHeightPixels = 85; 

    container.on('click', function(event) { 
     var target = $(event.target); 

     if (target.is('a') && target.attr('href').charAt(0) === '#') { 
      setTimeout(function() { 
       $('body').scrollTop($('body').scrollTop() - headerHeightPixels) 
      }, 0); 
     } 
    }); 
</script> 

Answer 1

Tocify 당신이 왼쪽 패널 (에 의해 생성되는 TOC 패널에서 링크를 클릭 할 때 스크롤 영역의 상단에있는 간격을 제어하는 ​​것이다 설정할 수있는 매개 변수가 있습니다 tocify.js) 이것은 문서화 된 here이며 tocify json의 scrollTo 키로 제어됩니다. 그러나 이것은 왼쪽 열에 대한 스크롤 영역의 위치 지정 만 제어합니다.

tocify와 동일한 논리를 추가하여 가운데 패널의 링크에 대한 스크롤을 "조정"할 수 있지만 같은 방법으로 할 수 있습니다. 우리가 사용하기 위해 다른 접근 방식을 취했습니다. 사용자가 슬레이트 문서를 통해 이동하기 시작할 때 페이지 상단의 머리글을 스크롤합니다. 우리가 합리적으로 생각하는 이유는 사용자가 긴 슬레이트 문서를 아래로 스크롤하기 시작하면 화가 나서 사용하기 때문에 최대한 많은 관련 정보를 얻을 수 있도록 최대한 많은 부동산을 제공하기를 원합니다. 헤더를 살펴보면 많은 사이트 컨텍스트를 제공하고 읽히는 문서와 관련이 거의 없습니다. 따라서 상단 머리글을 떠 다니는 독자는 더 많은 부동산을 얻고 스크롤 업하여 항상 돌아갈 수 있습니다.