twitter-bootstrap - 导航栏隐藏锚点

Question

我正在使用 Bootstrap 构建一个 Rails 应用程序，但顶部的固定导航栏隐藏了我通过附加到 url 的哈希锚点跳转到的内容。基本上我有与这篇文章解释的相同的问题：Fixed position navbar obscures anchors，我尝试使用我在 github 上找到的以下 js 代码来解决这个问题：

$(document).ready(function(){    
  var shiftWindow = function() { scrollBy(0, -50) };
  if (location.hash) shiftWindow();
  window.addEventListener("hashchange", shiftWindow);
});

当我单击页内链接以跳转到锚点时它工作正常，但是当我单击另一个页面中的链接试图重定向到 URL 中带有哈希的页面时失败，例如 from http://mysite.com/to http://mysite.com/posts/1#comment-5。

我无法弄清楚上面的 js 代码出了什么问题。请帮忙，谢谢！

Answer 1

我遇到了同样的问题，我发现最简单的解决方案是将锚点包装在section标签中，然后将 CSS 表更改为：

section {
    display: block;
    padding-top: 40px;
}

然后你就不需要任何 js 并且当你从另一个页面跳转到那个部分 id 时它会起作用。