0

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

Paolo
  • 20,112
  • 21
  • 72
  • 113
user1940007
  • 721
  • 3
  • 10
  • 14

1 Answers1

1

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

Wolf
  • 2,150
  • 1
  • 15
  • 11
  • Thanks! I put the code into my website, and made the menu bar but now for some reason it isn't working. It worked in a jsfiddle, but it isn't in my website please help! – user1940007 Dec 31 '12 at 20:58
  • I checked your website. Put the jquery.js reference above $(window).scroll methode call – Wolf Dec 31 '12 at 21:16
  • Thanks that worked, is there any quick way to make it so that when the page is at the top it goes away, so I don't have to deal with it fading. I looked at the website http://nizoapp.com and they seem to have it so when your window is at a certain part the objects change, I think I could use a much simpler version to make the menu appear when the window is scrolled down to a certain point. But because of my inexperience I don't know how to do that – user1940007 Dec 31 '12 at 21:53