所以我在尝试实现带有粘性顶部导航的词缀侧边栏时遇到了问题,当在页面上滚动或单击词缀侧边栏时,内容标题偏离了40像素(被粘性顶部导航覆盖)
基本上内容没有在固定导航栏下正确显示。
任何想法在这里如何修复它将是非常感激!
现场示例在这里
http://www.melindayang.com/portfolio-carmax.html下面寒冷:
顶部导航
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="aboutme.html">About Me</a>
</li>
<li><a href="document/MYang Resume.pdf"target="_blank">Résumé</a>
</li>
<li><a href="http://melindamcdm.wordpress.com/" target="_blank">Blog</a>
</li>
</ul>
</div>
词缀sidebar
<div class="col-xs-3" id="myScrollspy">
<ul class="nav nav-tabs nav-stacked" data-spy="affix" data-offset-top="125" id="myNav">
<li class="active">
<a href="#section-1">Summary</a></li>
<li><a href="#section-2">Research</a></li>
<li><a href="#section-3">Ideation</a></li>
<li><a href="#section-4">Prototype</a></li>
<li><a href="#section-5">Results</a></li>
</ul>
</div>
内容
<div class="col-xs-9">
<div id="section-1">
<p> 12345, Content goes here</p>
</div>
<div id="section-2">
<p> 12345, Content goes here</p>
</div>
<div id="section-3">
<p> 12345, Content goes here</p>
</div>
<div id="section-4">
<p> 12345, Content goes here</p>
</div>
<div id="section-5">
<p> 12345, Content goes here</p>
</div>
</div>
JS
<script type="text/javascript">
$(document).ready(function(){
$("#myNav").affix({
offset: {
top: 190
}
});
});
为正文添加padding
body
{
padding: 70px 0 0 0;
}
Bootstrap nav设置为50px高,再加上内容和nav之间的任意边距。
编辑:点击这里