Solution to: How do I create a Bootstrap navbar that fixes itself to the top of the page when scrolling?

Take a look at this page:

http://www.vrbo.com/vacation-rentals/usa/montana

Besides being a great site to find a vacation rental, VRBO’s website has some cool design features, one of them being the search bar embedded into the secondary navbar. What’s even cooler is that when you scroll down the page, the bar scrolls up to the top of the page, then stays there, until you scroll back to the top of the page. I wanted to implement using a Bootstrap navbar, so…

Solution

Bootstrap supplies a nice JavaScript function, affix().

You can view the documentation here: http://getbootstrap.com/javascript/#affix

To use, you need to set up your own style for the .affix class. I did this:

da92d713b85eff29dceabb9f82fbc70f000

Next, you need to add a bit of JavaScript:

da92d713b85eff29dceabb9f82fbc70f001

Note the top: 100 in the code. The way I understand it, this tells Bootstrap that the .affix class should be applied to the object (with id #navbar-search in this case) when the page has been scrolled >= 100 pixels, and unapplied when the page is scrolled < 100 pixels. Basically, just estimate how far down your navbar is on the page, and plug in that number. You may have to use a JavaScript function if your navbar can be at variable distances from the top of the page when the document is loaded.

I created a fiddle so you can see a working example: http://jsfiddle.net/drodrig/SB75d/

Caveats

I’m assuming you have installed Bootstrap (I’m using 3.0.2 as of the time of this post) and it’s associated JavaScript file (and jQuery, of course). Installing Bootstrap is outside the scope of this post (go to http://www.getbootstrap.com for info on how to install and use).