写的一个不太成熟的导航显示隐藏的效果.

<!DOCTYPE html>

<html lang="zh-cn">

<head>

<meta name="baidu-site-verification" content="mleTTANrEl" />

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />   

<meta name="viewport" content="width=1024" />

<meta name="author" content="ruifox" />

<meta name="keywords"  content="" />

<meta name="description" content="" />

<link rel="stylesheet" href="http://www.foxmeeting.com/layouts/css/foxmeeting/style.css" />

<link rel="stylesheet" href="http://www.foxmeeting.com/layouts/css/foxmeeting/pulic.css" />

<!--[if lt IE 9]><script type="text/javascript" src="http://www.ruifox.com/resouce/layouts/js/foxmeeting/company/html5.js"></script><![endif]-->



<!--[if IE 6]>

    <script src="//letskillie6.googlecode.com/svn/trunk/2/zh_CN.js"></script>

<![endif]-->

<title></title>

<style type="text/css">

nav{width:100%; height:100px; background:#1BABB7; position:fixed; top:0; display:block;}

body{height:2000px;}

.bt{background:#1BABB7; width:100%; height:50px; color:#fff; position:fixed; bottom:0; font-size:30px; text-align:center; line-height:50px;}

</style>





</head>

<body>

<nav class=""></nav>

<div class="bt"></div>



<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>

<script type="text/javascript">

var y=0;

$(window).scroll(function(){

  x=$(window).scrollTop();

 $(".bt").html(x);

 if(x<y){

 $("nav").slideDown();

 y=x;

 }else{

 y=x;

 $("nav").slideUp();

 }

 $("nav").html(y);

})

</script>

</body>

</html>

//思路大概就是计算鼠标滑轮的变化, 当往下滚动的时候,导航条消失,向上滚动显示出来

你可能感兴趣的:(显示)