<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="js/jquery.js"></script>
<style>
*{padding:0;margin:0;}
.header{height:80px;background:#f00;position:fixed;left:0px;top:0px;width:100%;transition: all 0.3s ease-out;}
.bar{height:20px;background:#000}
.banner{height:60px;background:#0f0;}
.pt{height:1000px}
.phone_menu{float: right;position: relative;top: 5px;width: 45px;height: 45px;cursor: pointer;}
.phone_menu em.p1{ display:block; width:22px; height:2px; background:#fff; position:absolute; top:50%; margin-top:-6px; left:50%; margin-left:-11px; border-radius:2px;transition: all 0.3s ease-out;}
.phone_menu em.p2{ display:block; width:22px; height:2px; background:#fff; position:absolute; top:50%; margin-top:0; left:50%; margin-left:-11px; border-radius:2px;transition: all 0.3s ease-out;}
.phone_menu em.p3{ display:block; width:22px; height:2px; background:#fff; position:absolute; top:50%; margin-top:6px; left:50%; margin-left:-11px; border-radius:2px;transition: all 0.3s ease-out;}
.phone_menu em.p1{ transform:rotate(0deg); margin-top:-7px;}
.phone_menu em.p2{ opacity:1;}
.phone_menu em.p3{ transform:rotate(0deg); margin-top:7px;}
.phone_menu:hover{border-radius: 5px;background: rgba(255,255,255,0.3);}
.phone_menu:hover em.p1 {
transform: rotate(45deg);
margin-top: 0;
}
.phone_menu:hover em.p2 {
opacity: 0;
}
.phone_menu:hover em.p3 {
transform: rotate(-45deg);
margin-top: 0;
}
</style>
</head>
<body>
<div class="header">
<div class="bar"></div>
<div class="banner">
<SPAN class="phone_menu"><EM class="p1"></EM><EM class="p2"></EM><EM class="p3"></EM></SPAN>
</div>
</div>
<div class="pt">
</div>
<script>
$(function(){
$(window).scroll(function(){
sc=$(window).scrollTop();
if(sc>80){
$(".header").css({"top":"-20px"})
}else{
$(".header").css({"top":"0px"})
}
})
})
</script>
</body>
</html>
