滚动时淡入

时间:2012-12-31 17:21:19

标签: jquery css menu scroll fading

我的网站是www.jeremyspence.net78.net。当你向下滚动我想让主菜单消失(你现在看到的一个菜单)和另一个较小的菜单(有点像来自apple.com的苹果菜单)出现在修复的顶部,我正在考虑制作粘性菜单,但我希望菜单显示在顶部滚动时不要只是从屏幕上的另一个点粘到顶部。有人知道如何在滚动时显示菜单,或任何教你如何教程?我想一个waypoint插件可以做到这一点,但我不知道如何

1 个答案:

答案 0 :(得分:1)

您可以使用jquery .scroll 方法来实现此目的。您可以显示代码以在.scoll事件处理程序

中显示菜单
<!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>

您可以找到文档和示例here