Bootstrap affix issues with sticky top navigation

问题

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!

Live site example here

http://www.melindayang.com/portfolio-carmax.html

Cold below:

The sticky top-nav

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

The affix 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>

The Content

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

The JS

<script type="text/javascript">
$(document).ready(function(){
$("#myNav").affix({
    offset: { 
        top: 190 
    }
    });
});

回答1:

Add padding to the body

body
{
    padding: 70px 0 0 0;
}

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

Edit: Check here

来源：https://stackoverflow.com/questions/23621495/bootstrap-affix-issues-with-sticky-top-navigation

标签

css

twitter-bootstrap

affix