javascript - 固定页眉和页内 anchor vs. Tripit Slate

Question

这个问题是关于让散列 URL(如 mydomain.com/somepage#SomeAnchor )从固定页面标题下滚动出来，当这些 URL 是跳转目标时。它是 this answered question 的一个分支– 但我想知道是否有人得到了完全使用 Tripit Slate 文档发布框架的答案？

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-tricks 中，我们已经了解了为什么“页内”散列链接仍然失败:

When a link includes a hash, like this: <a href="#section-two">Section Two</a> ...the browser window will scroll...to the minimum possible position to make that element wholly visible. ...flush with the top edge of the browser window. This can be..., in the case of a fixed-position, stay-on-top header, hugely problematic.

事实上，我们固定的顶部导航看起来很像 buddycloud(我们的高度为 82 像素)。我们的页内散列链接隐藏在它下面，就像他们的一样。

有两个重要的异常(exception):首先，如果目标“散列”URL 与出站链接位于同一个 Markdown 文件中，则目标会从固定标题下清晰地露出来，就像左侧导航链接一样。 (在源端，Slate 将所有内容存储为 .md 文件。)这将问题本地化:链接目标仅隐藏在 Slate 必须遍历到单独目标 .md 的地方。文件，然后连接 #<SomeAnchorName>完成网址。

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

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

但是，尽管这揭示了我们的“页内”散列链接，但它完全破坏了我们的左侧导航。由于与 Slate 的一些互动 tocify左导航生成器，任何以这种方式标记的标题行为如下:(1)在左导航中隐藏他们的 child 。 (2) 点击时，防止 jumptarget类从顶部标题下滚动它们。 (3) 单击时，在左侧导航中折叠其父级。

所以总而言之，我们的困境是:我们修复了来自左侧导航的链接，导致我们的文本链接被破坏。然而，我们对文本内链接的修复破坏了我们的左侧导航修复。

如果有人在 Tripit Slate 上全局解决了这个问题，或者 tocify或其他框架，我们将非常感谢您的指点。干净的 CSS、hacky HTML 或 jivey JavaScript——我们是不可知论者。谢谢!

[2016 年 7 月 13 日更新:] 这是我们的开发人员添加到 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>

Answer 1

Tocify 具有可以设置的参数，当您单击左侧面板(由 tocify.js 生成的 ToC 面板)中的链接时，这些参数将控制滚动区域顶部的间距。文档记录 here它由 tocify json 中的 scrollTo 键控制。但这仅控制左侧列的滚动区域的定位。

尽管您可以添加与 tocify 相同的逻辑，以与 tocify 相同的方式“调整”中心面板中链接的滚动。对于我们的使用，我们采用了不同的方法 - 当用户开始在 slate 文档中移动时，我们将顶部标题滚动到页面之外。我们对此的理由是，一旦用户开始向下滚动长长的石板文档，他们就会愤怒地使用它，我们希望给他们尽可能多的空间以获取尽可能多的相关信息。当我们查看标题时，它提供了许多站点上下文，并且与正在阅读的文档几乎没有关系。因此，但 float 顶部标题，读者可以获得更多的空间，并且总是可以通过向上滚动返回到它。