Bootstrap Scroll und feste Navbar - Buggy auf Container-Klasse?

Question

Ich möchte die Navigationsleiste reparieren, wenn Sie die Seite nach oben scrollen example.

Es ist in Ordnung, wenn Sie .container-fluid verwenden, aber es ist nicht, wenn Sie .container verwenden.

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> 

Ergebnis:

Irgendwelche Ideen, wie dieses Problem beheben?

Answer 1

Dies sollte es lösen: Fügen Sie den Affix data-spy in den Behälter Halten des nav

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>