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 scrolls past the div "a" and the scrollbar, I want the scroll bar to stick to the top. Similar to something like this: https://www.facebook.com/home but I don't have a video at the top, it is an image.

Can we do that we bootstrap itself?

Thanks!

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:

<div class="container" data-spy="affix" data-offset-top="400" id="nav">
    <div id="nav" class="navbar">
        <div class="navbar-inner"> ...

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

Answer 2

To get the effect show on facebook.com/home your navbar position should be set to static (or relative / absolute) until the user scrolls past 400px and then you need to set it's position to fixed so that is stays at the top of the screen. This can be done with a little javascript.