прокрутка бутстрапа и фиксированная навигационная панель - багги на классе контейнеров?

Question

Я хочу исправить навигацию, когда вы прокручиваете страницу вверх, как это example.

Это нормально, если вы используете .container-fluid, но это не когда вы используете .container.

CSS:

.affix { 
     top: 0; 
     width: 100%; 
    } 

    .affix + .container-fluid { 
     padding-top: 70px; 
    } 

HTML:

<div class="container" style="background-color:#F44336;color:#fff;height:200px;"> 
    <h1>Bootstrap Affix Example</h1> 
    <h3>Fixed (sticky) navbar on scroll</h3> 
    <p>Scroll this page to see how the navbar behaves with data-spy="affix".</p> 
    <p>The navbar is attached to the top of the page after you have scrolled a specified amount of pixels.</p> 
</div> 

<div class="container"> 
    <nav class="navbar navbar-default" data-spy="affix" data-offset-top="197"> 
     <ul class="nav navbar-nav pull-right"> 
     <li class="active"><a href="#">Basic Topnav</a></li> 
     <li><a href="#">Page 1</a></li> 
     <li><a href="#">Page 2</a></li> 
     <li><a href="#">Page 3</a></li> 
     </ul> 
    </nav> 
</div> 


<div class="container" style="height:1000px"> 
    <h1>Some text to enable scrolling</h1> 
    <h1>Some text to enable scrolling</h1> 
    <h1>Some text to enable scrolling</h1> 
    <h1>Some text to enable scrolling</h1> 
    <h1>Some text to enable scrolling</h1> 
    <h1>Some text to enable scrolling</h1> 
    <h1>Some text to enable scrolling</h1> 
    <h1>Some text to enable scrolling</h1> 
    <h1>Some text to enable scrolling</h1> 
    <h1>Some text to enable scrolling</h1> 
    <h1>Some text to enable scrolling</h1> 
</div> 

Результат:

Любые идеи, как это исправить?

Answer 1

Это должно решить: Добавить аффикс data-spy в контейнер, содержащий СЧА

HTML:

<div class="container" data-spy="affix" data-offset-top="197"> 
<nav class="navbar navbar-default"> 
    <ul class="nav navbar-nav pull-right"> 
    <li class="active"><a href="#">Basic Topnav</a></li> 
    <li><a href="#">Page 1</a></li> 
    <li><a href="#">Page 2</a></li> 
    <li><a href="#">Page 3</a></li> 
    </ul> 
</nav> 
</div>