How can I fix the bootstrap navbar to the top after a div was scrolled?

Question

I am trying to get my navbar with bootstrap to appear after a certain div, called \"A\". Div \"a\" is at the top of by page, and has a height of around 400px. Once the user

Answer 1

If you'd like to achieve this using Twitter's Bootstrap check out the 'Affix' js. You define the "fixed" point using the "data-offset-top" and then the navbar will become fixed to the top when user scrolls down.

CSS:

#con .well {
    height:390px;
}

#nav.affix {
    position: fixed;
    top: 0;
    width: 100%
}

HTML:

    

        
 ...

Javascript:

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

Here is the working fiddle: http://jsfiddle.net/skelly/df8tb/

Here's a working example (updated for Bootstrap 3): http://bootply.com/90936