You visit a site (like lesscss.org), you see the menu on the middle of your screen, while you scroll down, suddenly the menu scroll on the top of your browser screen.... cool, you said ! Now i'm gonna to show you how easy it is to do it with bootstrapJS !

I made an example here , now there are only two step to create the effect:

  1. Assign your div container to affix plugin
  2. Set how it will look in affix mode

 

Assign your div container to affix plugin

There are two ways to achieve this:

Inner Tag Properties (data attributes):

<divdata-spy="affix"data-offset-top="200">...</div>

Javascript

$('#navbar').affix()

The data-offset-top value is the amount of pixels that you must scroll in order for the affixing effect to take place. Once this class change occurs, you must position your element in css by styling the positioning for class .affix. Bootstrap 2.1 already defines .affix as position: fixed; so all you need to do is add your own position values.

Example:

.affix {
    position:fixed; 
    top:20px; 
    left:0px;}
Trackback URL: