Fade in when scrolling

My site is www.jeremyspence.net78.net. As you scroll down I want to make the main menu dissapear(the one menu you see now) and another smaller menu (kinda like the apple menu from apple.com) appear on the top that is fixed, I was thinking about making a sticky menu, but I want the menu to appear at the top when you scroll not just stick to the top from another point on the screen. Does anyone know how to make a menu appear when you scroll, or any tutorials that teach you how? I imagine a waypoint plugin could do this, but I don't know how

Solution

You can use jquery .scroll method for achieving this. You can show the code to show the menu in the .scoll event handler

<!DOCTYPE html>
<html>
<head>
  <style>
  div { color:blue; }
  p { color:green; }
  span { color:red; display:none; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <div>Try scrolling the iframe.</div>
  <p>Paragraph - <span>Scroll happened!</span></p>
<script>
    $("p").clone().appendTo(document.body);
    $("p").clone().appendTo(document.body);
    $("p").clone().appendTo(document.body);
    $(window).scroll(function () { 
      $("span").css("display", "inline").fadeOut("slow"); 
    });

</script>

</body>
</html>

You can find the documentation and sample here