¿Cómo puedo pegar el div después de desplazarse hacia abajo un poco

Quería pegar el segundo div cuando nos desplazamos hacia abajo en la página y cuando el segundo div se encuentra con el límite superior. Cuando esté arreglado, debería desplazarse junto con las otras páginas. ¿Cómo puedo conseguir esto?

#settings{
    width:100%;
    background:#383838;
    height:60px;
}
#menu{
    width:100%;
    position:relative;
    height:100px;
    background:#aaa;
}
#body-content{
    height:900px;
    position:relative;
}

y el HTML

<body>
<div id="top">
    <div id="settings">
    </div>
    <div id="menu">
    </div>
</div>
<div id="body-content">
</div>

</body>

Aqui en este ejemplohttp://jsfiddle.net/WBur3/ , el 2do div debe fijarse cuando nos desplazamos por la página. Cuando nos desplazamos hacia arriba, deberíamos convertirnos en el estado anterior mismo. Por favor, ayúdame.

Respuestas a la pregunta(4)

Su respuesta a la pregunta