Bootstrap 浮动导航栏和锚点对齐

Question

我遇到了一个似乎很常见的问题。我有一个浮动在屏幕顶部的 bootstrap 导航栏。

但是：

页面的顶部 50 像素被导航栏覆盖 - 但我可以使用 body { padding-top: 70px;}
当我尝试导航到 mypage.html#foo 时，浏览器将锚点与页面的 top 对齐，并切断了顶部 50px。我可以通过使用 window.scrollTo 的脚本来解决这个问题，但它有点老套
当我通过在我的页面内单击来执行相同的操作时，同样的事情发生了并且 onload 处理程序没有被调用。

有没有简单的解决方法？我可以重写每个 link 上的点击处理程序，但这看起来太可怕了。我可以挂钩一些 onnavigate 事件吗？

这似乎是浮动导航栏的一个非常普遍的问题，所以有更简单的解决方案吗？

根据要求发布代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="navbar-wrapper">
    <div class="container">
      <div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
        <div class="container">
          <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
              <span class="sr-only">Toggle navigation</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="/">Hello</a>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="container">
  <h1><a name="1"></a>1</h1>
  <h1><a name="2"></a>2</h1>
  <h1><a name="3"></a>3</h1>
  <h1><a name="4"></a>4</h1>
  <h1><a name="5"></a>5</h1>
  <h1><a name="6"></a>6</h1>
  <h1><a name="7"></a>7</h1>
  <h1><a name="8"></a>8</h1>
  <h1><a name="9"></a>9</h1>
  <p><a href="#2">Go to 2</a></p>
  <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.0.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>

它的问题是：

'1' 被切掉顶部（容易修复）
如果你转到 test.html#2，'2' 被截掉顶部
如果你点击 'go to 2' link，'2' 仍然被切掉顶部

如果有一件简单的事情可以解决所有这 3 个问题，那就太好了 - 目前我能找到的只有 3 个单独的技巧:)

Answer 1

好的，我通过以下方式解决了这个问题：

使用非固定导航栏
创建一个可滚动的 div 填充整个屏幕，除了顶部 50px 并将所有内容放入其中。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="navbar-wrapper">
    <div class="navbar navbar-inverse" role="navigation">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="/">Hello</a>
        </div>
      </div>
    </div>
  </div>

  <div style="position:absolute;top:50px;bottom:0px;left:0px;right:0px;overflow:auto">
  <div class="container">
  <h1><a name="1"></a>1</h1>
  <h1><a name="2"></a>2</h1>
  <h1><a name="3"></a>3</h1>
  <h1><a name="4"></a>4</h1>
  <h1><a name="5"></a>5</h1>
  <h1><a name="6"></a>6</h1>
  <h1><a name="7"></a>7</h1>
  <h1><a name="8"></a>8</h1>
  <h1><a name="9"></a>9</h1>
  <p><a href="#2">Go to 2</a></p>
  </div>
  </div>
  <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.0.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>

感觉仍然应该有更好的方法来使固定导航栏工作，但是嘿。

Bootstrap 浮动导航栏和锚点对齐

Bootstrap floating navbar and alignment of anchors

html

javascript

css

anchor

twitter-bootstrap