como posso colocar a div depois de descer um pouco

Eu queria furar o segundo div quando rolar a página e quando o segundo div atende ao limite superior. Quando é corrigido, ele deve rolar junto com as outras páginas. Como posso conseguir isso?

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

e o HTML

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

</body>

Aqui neste exemplohttp://jsfiddle.net/WBur3/ , o segundo div deve ser corrigido quando rolarmos a página. Quando rolarmos para cima, devemos nos transformar no estado anterior. Por favor me ajude.

questionAnswers(4)

yourAnswerToTheQuestion