滚动跳过h2

Question

使用Bootstrap，我有一个下面的nav nav-list：

<ul class="nav nav-list well hidden-phone hidden-tablet" data-spy="affix" data-offset-top="299">
        <li><a href="#about">About The Green Panda</a></li> 
        <li class="divider"></li>
        <li><a href="#logo">Logo & Brand</a></li> 
        <li class="divider"></li>
        <li><a href="#">Contact us</a></li> 
        <li class="divider"></li>
        <li><a href="#">Press</a></li> 
        <li class="divider"></li>
        <li><a href="#">Work With Us</a></li>
      </ul>

href链接到页面上的h2。当你点击链接时，它会跳过h2，当你滚动到它时不会显示它。我在这里创建了一个JS小提琴：http://jsfiddle.net/YNRWp/

我想不出怎么解决这个问题。我相信这与修复的导航栏有关，但我不知道这是什么。这就是我想要它做的事情(请注意每个部分顶部的标题：http://twitter.github.io/bootstrap/scaffolding.html#global

Answer 1

当浏览器滚动到您的H2时，它不会考虑到标题浮动在它上面。你可以通过给你的h2添加一些“padding”来解决这个问题。

h2 { padding-top: 50px; }