Question

这个问题是关于在这些网址是跳转目标时，从固定页面标题下滚动出来的散列网址（如mydomain.com/somepage#SomeAnchor）。它是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> ...浏览器窗口将滚动到最小使该元素完全可见的可能位置。 ...同花顺浏览器窗口的上边缘。这可以是...，在a的情况下固定位置，保持顶部标题，非常有问题。

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

有两个重要的例外：首先，如果目标“散列”URL位于与出站链接相同的相同降价文件中，则目标会从固定标题下方清晰地查看，就像左导航链接。（在源端，Slate将所有内容存储为.md个文件。）这会将问题本地化：链接目标仅隐藏，其中Slate必须遍历单独的目标.md文件，然后连接#<SomeAnchorName>以完成网址。

其次，我们已经发现了一个hack，它会获取所有“页内”散列链接以清除我们的顶部标题。这涉及使用两个跨度在HTML中对我们的标题进行双重标记。第一个是空的虚拟跨度，它位于实际标题文本之上以欺骗滚动行为。（它用我们上面的jumptarget类标记。）在标题本身上，我们应用一个单独的span与一个类，它修正了第一个hack的左缩进。双标记看起来像这样：

<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具有可设置的参数，当您单击左侧面板中的链接（由tocify.js生成的ToC面板）时，该参数将控制滚动区域顶部的间距。这是记录的{{ 3}}它由tocify json中的scrollTo键控制。但这仅控制左侧列的滚动区域的位置。

虽然你可以添加与tocify中相同的逻辑来调整＆＃34;调整＆＃34;中心面板中链接的滚动方式与tocify相同。对于我们的使用，我们采用了不同的方法 - 当用户开始浏览平板文档时，我们在页面上滚动顶部标题。我们的理由是，一旦用户开始向下滚动一个长文件，他们就会愤怒地使用它，我们希望尽可能多地给他们房地产以获得尽可能多的相关信息。当我们查看标题时，它提供了大量的站点上下文，与正在阅读的文档几乎没有关系。因此，但是浮动顶部标题，读者可以获得更多的空间，并且可以通过向上滚动来返回它。

固定页面标题和页内锚点与Tripit Slate

1 个答案: