我遇到了一个似乎很常见的问题。我有一个 float 在屏幕顶部的 Bootstrap 导航栏。
但是:
- 页面的顶部 50px 被导航栏覆盖 - 但我可以使用
body { padding-top: 70px;} 修复它
- 当我尝试导航到
mypage.html#foo时，浏览器将 anchor 与页面的top对齐，截去顶部 50px。我可以通过使用window.scrollTo的脚本来解决这个问题，但它有点老套 - 当我通过在我的页面中单击来执行相同操作时，会发生相同的事情并且不会调用
onload处理程序。
有没有简单的解决方法？我可以重写每个链接上的点击处理程序，但这看起来太可怕了。我可以挂接到一些 onnavigate 事件吗？
这似乎是 float 导航栏的一个非常普遍的问题，所以有没有更简单的解决方案？
按要求发布代码:
<!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 个独立的技巧 :)
最佳答案
好的，我通过以下方式解决了这个问题:
- 使用非固定导航栏
- 创建一个可滚动的 div，除了顶部 50 像素外，它会填满整个屏幕，并将所有内容放入其中。
<!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>仍然感觉应该有更好的方法来使固定导航栏工作，但是嘿。
关于javascript - Bootstrap float 导航栏和 anchor 对齐，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42560199/