自举浮动导航栏和锚点对齐

我有什么似乎是一个常见问题。我有一个自举导航栏，它浮在屏幕的顶部。自举浮动导航栏和锚点对齐

但是：

页面的顶部50像素是通过导航栏覆盖 - 但是我可以修复与body { padding-top: 70px;}
当我尝试并导航到mypage.html#foo浏览器对准锚的top该页面，切断顶部50px。我可以通过一个使用window.scrollTo的脚本来解决这个问题，但这有点冒失鬼
当我点击我的页面时也会发生同样的情况，并且不会调用onload处理程序。

有没有简单的解决方案呢？我可以在每个链接上重写点击处理程序，但这看起来很糟糕。我可以钩上一些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'被切断顶部
如果你点击“进入2”链接，“2”仍是顶部切断

这会是很好，如果有就解决这些问题的所有3一件简单的事情 - 我所能发现此刻是3名独立的黑客:)

来源

2017-03-02 Gordon Williams

你有任何的代码吗？我们可以看到你至少在做什么 – Toxide82

已更新的问题与示例代码 –

您是否尝试创建一个div来保存您的内容，并在div上填充顶部？ –

好吧，我解决了这个由：

使用非固定的导航栏
创建从顶部50像素除了充满整个屏幕滚动的div并把所有内容都放在里面。

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

它仍然感觉应该做一个固定的导航栏工作的更好的方法，但是，嘿。

来源

2017-03-17 10:05:40

自举浮动导航栏和锚点对齐

回答

相关问题