固定页眉和页内锚点与 Tripit Slate

Posted 2023-02-25

【中文标题】固定页眉和页内锚点与 Tripit Slate

【英文标题】：Fixed page header and in-page anchors vs. Tripit Slate

【发布时间】：2016-10-16 05:10:13

【问题描述】：

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

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

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

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

我们的 left-nav 链接工作干净，就像 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 中，我们了解到为什么“页内”散列链接仍然失败：

当链接包含哈希时，如下所示：<a href="#section-two">Section Two</a> ...浏览器窗口将滚动...到最小 使该元素完全可见的可能位置。 ...冲洗 浏览器窗口的顶部边缘。这可以是......，在一个 固定位置，留在顶部的标题，非常有问题。

确实，我们的固定顶部导航看起来很像 buddycloud 的（我们的高 82 像素）。我们的页内哈希链接隐藏在它下面，就像他们的一样。

有两个重要的例外：首先，如果目标“散列”URL 与出站链接位于 same 降价文件中，则目标干净地从固定标头下窥视，就像左导航链接可以。 （在源端，Slate 将所有内容存储为 .md 文件。）这将问题本地化：链接目标隐藏 only 其中 Slate 必须遍历到 separate 目标@ 987654331@ 文件，然后连接 #<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——我们是不可知论者。谢谢！

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

【参考方案1】：

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

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

【讨论】：

Paul：非常感谢您的建议——它切中要害、乐于助人，而且非常实用（关于避免用户愤怒）。我们已经考虑滚动掉我们的顶部标题。如果没有登录您的网站，我想我们看不到您是如何实现的？

抱歉没有及时提示，我刚刚看到您的后续问题。这是我的意思的[公共示例] (developer.cisco.com/site/flare/learn/api)。这是我们为 Cisco 制作的 Slate 文档。

感谢您提供的示例。很好地使用了持久的顶部标题（底部行）。我们尝试编写间歇性/滚动标题的脚本，但出现异常 - 某些链接的目标仍然被隐藏。 （例如，当单击位于当前焦点链接上方的左导航链接时。）所以现在我们正在尝试一个持久标题。我们的 ace 开发人员在我们的 layout.erb 文件中添加了一个脚本（附加到我们上面的原始帖子中）。我们正在测试它是否清除所有 3 种链接的目标的顶部标题：从左侧导航、页内到相同的 .md 文件，以及页内到单独的 .md 文件。