Bootstrap粘贴顶部导航的问题 [英] Bootstrap affix issues with sticky top navigation

问题描述

所以我在尝试使用粘性顶部导航来实现固定边栏时出现问题，当在页面上滚动或点击固定边栏时，内容标题关闭40像素（被粘顶导航覆盖）

So I am having issues when trying to implement the affix sidebar with a sticky top nav, when scrolling on the page or clicking on the affix sidebar, the content header is off by 40 pixel (getting covered by the sticky top nav)

基本上，内容在固定导航下无法正确显示。

Basically the content is not showing appropriately under the fixed navigation.

这里的任何想法如何解决非常感谢！

Any idea here how to fix it will be much appreciated!

这里的现场示例

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>

贴文侧栏

<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 
    }
    });
});

推荐答案

将正文添加到正文

body
{
    padding: 70px 0 0 0;
}

Bootstrap导航高度为50px，加上内容和nav之间的任何边距。

Bootstrap nav is 50px high, plus whatever margin you want between content and nav.

编辑：请在这里查看

这篇关于Bootstrap粘贴顶部导航的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！