javascript - 固定的页眉和页内 anchor 与Tripit Slate

这个问题是关于当哈希URL(例如mydomain.com/somepage#SomeAnchor)成为跳转目标时，它们从固定页眉下滚动出来的问题。这是this answered question的分支–但是我想知道是否有人得到了答案，可以完全在Tripit Slate文档发布框架中工作？

This Slate-based site不是我们的，但它显示了我们的困境:

如果单击左侧导航栏中的链接，则中心文本列将滚动
到您选择的标题。一切都很好。

但是，请尝试单击正文中的链接。例如，来自
http://buddycloud.com/api#accounts，单击push notification链接。您滚动到一个完全不同的子标题。您要求的目标
实际上具有焦点，但隐藏在顶部导航栏下方。 (向上滚动并
您会看到它的。)

我们的左侧导航链接可以正常工作，就像buddycloud网站的链接一样。多亏了Sidnicious' 4086107 answer，我们已经将所有Nicholas 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技巧中，我们了解了为什么它对于“页内”哈希链接仍然失败:



确实，我们的固定顶部导航看起来很像buddycloud的(我们的高度为82像素)。和页面内的哈希链接一样，它们也隐藏在其下方。

有两个重要的异常(exception):首先，在目标“哈希” URL与出站链接位于同一markdown文件中的情况下，目标就像从左导航链接一样，从固定 header 下清晰地窥视。 (在源方面，Slate将所有内容存储为.md文件。)这可以解决该问题:链接目标仅隐藏Slate必须遍历到单独的目标.md文件，然后连接#<SomeAnchorName>才能完成URL的位置。

其次，我们发现了一个黑客，该黑客可以获取所有“页内”哈希链接以清除我们的顶部标题。这涉及使用两个跨度在HTML中对我们的标题进行双重标记。第一个是空的虚拟跨度，它位于实际标题文本上方以欺骗滚动行为。 (在上面的jumptarget类中标记了它。)在标题本身上，我们对一个类应用了一个单独的跨度，该类可纠正第一个hack中的左缩进。双重标记如下所示:

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

但这虽然揭示了我们的“页内”哈希链接，但它完全破坏了我们的左侧导航。由于与Slate的tocify left-nav生成器进行了某些交互，因此以这种方式标记的任何标题的行为如下:(1)将其子项隐藏在左侧导航中。 (2)单击时，防止jumptarget类从顶部标题下方滚动出它们。 (3)单击时，将其父项折叠在左侧导航栏中。

因此，总而言之，我们的困境是:我们修复了左侧导航中的链接，使文本链接失效了。而我们对文本链接的修复破坏了我们的左侧导航修复。

如果有人在Tripit Slate或tocify或其他框架上全局解决了此问题，我们将非常感谢您提供指针。干净的CSS，hacky HTML或jivey JavaScript –我们是不可知的。谢谢!

[更新7/13/16:]这是我们的开发人员添加到layout.erb的脚本，用于清除链接目标以免被持久 header 隐藏。我们正在测试它是否适用于所有链接。非常欢迎发表评论:

<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>

最佳答案

Tocify具有可设置的参数，当您单击左侧面板(由tocify.js生成的ToC面板)中的链接时，该参数将控制滚动区域顶部的间距。这已记录在here中，并且受到控制通过scrollTo键输入tocify json。但这仅控制左侧列的滚动区域的位置。

尽管您可以添加与tocify中相同的逻辑来以与tocify相同的方式“调整”中心面板中链接的滚动。对于我们的使用，我们采用了另一种方法-当用户开始浏览slate文档时，将页面顶部的标题滚动出页面。我们这样做的合理性是，一旦用户开始向下滚动一个较长的石板文档，他们就会大为恼火，我们希望为他们提供尽可能多的房地产，以获取尽可能多的相关信息。当我们查看标题时，它提供了很多站点上下文，并且与正在阅读的文档无关。因此，通过 float 顶部标题，读者可以获取更多房地产信息，并且可以随时向上滚动返回该信息。