Menu bar appear on scroll?

JavaScript
1

Hi Guys

I hope this is an easy one.

Basically I have constructed a simple top navigation bar that spans the entire width of my page. Currently it is fixed to the top of the page so if the user scrolls down the page it will always remain at the top. My script can be seen here:

<style>
body {
    margin: 0;
}
#header {
color: #848484;
height: 70px;
width: 100%;
position: fixed;
top: 0;
font-size: small;
font-style: oblique;
text-align: center;
background: #333333;}
</style>

<div id="header">
<font color="#FFFFFF">
Here's my top menu</font>
</div>

Unfortunately, this is only half of what I need it to do. Ideally, I only want the navigation bar to appear “IF” the page is scrolled down past a certain point in my page. So, it ONLY appears if the user scrolls past a certain point. If the user goes back up past this point then the navigation bar disappears. The reason I need this this is because I already have a navigation section at the top of my page already. As my page is pretty long I want the user to be able to use a simpler form of my navigation menu without having to scroll all the way to the top of the page.

Is this possible? If so, how do I do this? I have little clue about javascript programming so any help would be fully appreciated.

Best regards

Rod from the UK