以往我们都是鼠标悬停才出现的幽灵菜单；今天给大家介绍一个滚动的幽灵菜单
滚动的幽灵菜单
1.html 随便设置
代码如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>表格</title>
<link rel="stylesheet" href="css/font-awesome.min.css" type="text/css">
<style>
*{margin:0;padding: 0;}
body{
height: 2000px;}
.shou{
width: 100%;
height: 48px;
border-bottom: 2px solid red;
background:url(images/1.png) no-repeat 50px;
position: absolute;
top:0;
left: 0;
}
.lai input{
width: 350px;
height: 35px;
color: rgb(153, 153, 153);
border:none;
outline:none;
letter-spacing: normal;
word-spacing: normal;
background-color: #efefef;
}
.lai{
height: 35px;
width: 400px;
margin:0 auto;
margin-top:5px;
background-color: red;
position: relative;
}
.lai span{
position: absolute;
right: 65px;
top: 7px;
color: rgb(153, 153, 153);
}
.lai>i{
margin-left: 10px;
font-size: 20px;
font-weight: 700;
color: #fff;
}
.ki{
height: 55px;
width: 100%;
}</style>
</head>
<body>
<div class="ki"></div>
<div class="shou">
<div class="lai">
<input type="" placeholder="请输入你需要的产品" value="" >
<span><i class="fa fa-camera"></i></span>
<i class="fa fa-search"></i>
</div>
</div>
iahfwiuhwcoiawoicawojwaj<br>
wiuahfoiwhowheohwehvhe<br>
iahfwiuhwcoiawoicawojwaj<br>
wiuahfoiwhowheohwehvhe<br>
iahfwiuhwcoiawoicawojwaj<br>
wiuahfoiwhowheohwehvhe<br>
iahfwiuhwcoiawoicawojwaj<br>
wiuahfoiwhowheohwehvhe<br>
jQuery部分
<script type="text/javascript">
function hai() {
var lai = document.documentElement.scrollTop;
if(lai>300){
$(".shou").animate({"top":lai},500).show();
}else{
$(".shou").hide();
}
}
var timer=null;
var lastTime=new Date().getTime();
var isIe6-navigator.userAgent.indexOf("MSIE 6.0") > 0;
window.onscroll=function(){
if(isIe6)
{
return false
}
}
var timr=null;
var lastTime=new Date().getTime();
window.onscroll=function(){
var st=document.documentElement.scrollTop;
if(st>300){
if(!isIe6)
{
clearTimeout(timer);
timer=setTimeout(function(){
$(".shou").removeClass("fixed");
$(".shou").show().animate({"top":st},100);
},100);
}else{
$(".shou").show()
}
}else{
$(".show").hide();
}
</script></body>
</html>
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。