Keep navbar fixed to a specific position on bootstrap

Question

I have the following scenario:

Current Fiddle

On this fiddle I'm trying to set the .navbar positioned just below the big jumbotron to be a fixed navbar as soon as the user starts scrolling past the said navbar. I tried using bootstrap's .navbar-fixed-top but it sends it back to the top. position: fixed makes the navbar go God knows where.

That's all I could come up with whilst trying to make the navbar fixed to that specific position. Can this be done only with CSS? I'm starting to think maybe some jQuery may be required.

Any help will be much appreciated.

Answer 1

Bootstrap has the Affix plugin. The documentation Table of Contents on the right side of the Bootstrap docs use this itself.

A quick google search got me this fiddle (I did not write this, credit to whoever did): http://jsfiddle.net/skelly/df8tb/

HTML:

 <div class="container" id="con">
        <div class="row">
            <div class="span12">
                <div class="well">
                    <h1> Header </h1>               
                </div>
            </div>
        </div>
    </div>
    <div class="container" data-spy="affix" data-offset-top="400" id="nav">
        <div class="navbar">
            <div class="navbar-inner">
                <div class="container">
                    <div class="span12">
                        <a class="brand" href="#">Home</a>
                         <ul class="nav">
                            <li class="active"><a href="#">Home</a></li>
                            <li><a href="#">Link</a></li>
                            <li><a href="#">Link</a></li>
                         </ul>
                    </div>
                </div> 
            </div> 
        </div> 
    </div>
    <div class="container">
        <div class="span3">
            <p style="height:1000px;padding:10px;">

                Long scrolling text here... Ovi lispmd idr. Blah goo bar foor foo.  Ovi lispmd idr. Blah goo bar foor foo. Ovi lispmd idr. Blah goo bar foor foo. Ovi lispmd idr. Blah goo bar foor foo. Ovi lispmd idr. Blah goo bar foor foo. Ovi lispmd idr. Blah goo bar foor foo. Ovi lispmd idr. Blah goo bar foor foo. Ovi lispmd idr. Blah goo bar foor foo. Ovi lispmd idr. Blah goo bar foor foo. Ovi lispmd idr. Blah goo bar foor foo.

            </p>
        </div>
    </div>

JS:

$('#nav').affix({
});

Answer 2

As far as i understand Use a jquery plugin called as Sticky

You can find it here

You can use this code

$(document).ready(function(){
    $("#stick").sticky({topSpacing:20});
  });

Just change the spacing if required.

I have also created a fiddle for this.

Answer 3

I don't know about jquery, but I believe this is what you are looking for: http://getbootstrap.com/javascript/#scrollspy . I've done some Ruby On Rails with bootstrap, so this is where I'm coming from.

EDIT: No need for additional jQuery! Bootstrap is cool enough to do things like this.