4

この質問は、ハッシュ化された URL ( などmydomain.com/somepage#SomeAnchor) を取得して、固定ページ ヘッダーの下からスクロール アウトすることに関するものです。これらの URL はジャンプ ターゲットです。これは、この回答済みの質問から派生したものですが、Tripit Slate のドキュメント公開フレームワークに完全に取り組むための回答を得た人がいるかどうか疑問に思っています。

この Slate ベースのサイトは私たちのものではありませんが、私たちの苦境を示しています。

  • 左側のナビゲーションからリンクをクリックすると、中央のテキスト列が選択した見出しまでスクロールします。すべては順調です。

  • ただし、本文のリンクをクリックしてみてください。たとえば、 http://buddycloud.com/api#accountspush notificationから、 リンクをクリックします。まったく別の小見出しまでスクロールします。リクエストしたターゲットには実際にフォーカスがありますが、上部のナビゲーション バーの下に隠れています。（上にスクロールすると表示されます。）

左のナビゲーションリンクは、 buddycloudサイトのようにきれいに機能します。シドニシャスの 4086107 回答のおかげで、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-tricks から、「ページ内」のハッシュ化されたリンクに対して失敗する理由を学びました。

次のように、リンクにハッシュが含まれている場合: <a href="#section-two">Section Two</a> ...ブラウザ ウィンドウがスクロールします...その要素が完全に表示されるように、可能な限り最小の位置までスクロールします。...ブラウザ ウィンドウの上端と同じ高さになります。これは...、固定位置の先頭に留まるヘッダーの場合、非常に問題になる可能性があります。

確かに、私たちの固定トップ ナビゲーションは buddycloud のものによく似ています (私たちのものは高さ 82 ピクセルです)。そして、ページ内のハッシュ化されたリンクは、彼らのリンクと同じように、その下に隠れています。

2 つの重要な例外があります。1 つ目は、ターゲットの「ハッシュ化された」URLがアウトバウンドリンクと同じマークダウン ファイル内に存在する場合、左ナビゲーション リンクと同様に、ターゲットは固定ヘッダーの下からきれいに覗き出されます。(ソース側では、スレートはすべてのコンテンツを.mdファイルとして保存します。) これにより、問題が局所化されます。リンク ターゲットは、スレートが別のターゲットファイルにトラバースし、連結して URL を完成させる必要がある場所のみを非表示にします。.md#<SomeAnchorName>

次に、すべての「ページ内」のハッシュ化されたリンクを取得してトップ ヘッダーをクリアするハックを発見しました。これには、2 つのスパンを使用して、HTML で見出しを二重タグ付けすることが含まれます。1 つ目は、実際の見出しテキストの上にある空のダミー スパンで、スクロール動作をだまします。(上記のクラスでタグ付けされています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、ハックな HTML、または jivey JavaScript – 私たちはとらわれません。ありがとう！

[2016 年 7 月 13 日更新:] これは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>
4

1 に答える 1

0

Tocify には、左側のパネル (tocify.js によって生成される ToC パネル) からリンクをクリックしたときにスクロール領域の上部の間隔を制御する設定可能なパラメーターがあります。これはここに文書化されており、制御されています。 tocify json の scrollTo キーで。ただし、これは左側の列のスクロール領域の位置を制御するだけです。

tocify と同じロジックを追加して、中央パネルのリンクのスクロールを tocify と同じ方法で「調整」することができます。私たちの使用では、別のアプローチを採用しました。ユーザーがスレート ドキュメント内を移動し始めたときに、ページの一番上のヘッダーをスクロールします。この理由は、ユーザーが長いスレート ドキュメントを下にスクロールし始めると、怒りでそれを使用しているため、できるだけ多くの関連情報を取得するために、できるだけ多くの領域を提供したいと考えているからです。ヘッダーを見ると、多くのサイト コンテキストが提供されており、読み取られているドキュメントとはほとんど関係がありませんでした。したがって、トップ ヘッダーをフローティングしても、読者はより多くの領域を取得し、上にスクロールすることでいつでもそこに戻ることができます。

于 2016-06-17T16:46:43.890 に答える