固定ページヘッダーとページ内アンカーとTripit Slateの比較

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> ...ブラウザウィンドウがスクロールします。..その要素を完全に見えるように最小限の の位置に設定します。 ...ブラウザウィンドウの上端に でフラッシュします。これは... の固定位置、トップ・オン・トップヘッダーの場合には、非常に問題があります。

確かに、私たちの固定トップナビは、buddycloud（私たちは82pxの高さ）のように見えます。また、ページ内のハッシュ・リンクは、そのようにその下に隠れています。二つの重要な例外を除いて

：まず、ターゲットはURLがアウトバウンドリンクとして同じ値下げファイル内にある「ハッシュ化」の場合には、ターゲットはきれいにちょうど左のナビゲーションリンクとして、固定ヘッダの下から出てピークし行う。 （。.mdファイルなどのソース側、スレートの店ですべてのコンテンツ）これは、問題を局在：リンクターゲットはスレートが別々対象.mdファイルにトラバースし、その後、URLを完了するために、#<SomeAnchorName>を連結しているだけを非表示にします。

は、すべての「ページはめ込み」のハッシュリンクを取得してトップヘッダーをクリアするハックを発見しました。これには、2つのスパンを使用して、HTMLで見出しを二重タグ付けする必要があります。最初のものは空のダミースパンで、スクロール動作を欺くために実際の見出しのテキストの上にあります。 （これは上記のjumptargetクラスでタグ付けされています。）見出し自体では、最初のハックから左インデントを訂正するクラスと別のスパンを適用します。デュアルタグは次のようになります：

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

しかし、これは「ページ内」のハッシュリンクを示していますが、左のナビゲーションを完全に破ります。 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と同じロジックを追加して、中央パネルのリンクのスクロールをtocifyと同じ方法で調整することもできますが、私たちの使用のために、私たちは別のアプローチを取った - ユーザーがスレート文書を移動し始めるときに、ページ上部のヘッダーをスクロールする。私たちの合理的な理由は、ユーザーが長いスレート文書をスクロールダウンし始めると、怒りでそれを使用しており、できるだけ多くの関連情報を得るために可能な限り多くの不動産を提供したいということです。見出しを見ると、多くのサイト・コンテキストが提供され、読み込まれていたドキュメントとはほとんど関係がありませんでした。したがって、トップヘッダーを浮かべると、読者はより不動産を得て、スクロールアップすることによって常にそれに戻ることができます。