<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>scroll</title>
<script src="jquery-1-12-1.js"></script>
</head>
<style>
*{
margin: 0;
padding: 0;
list-style: none;
}
.header{
100%;
height: 50px;
position: fixed;
left: 0;
top: -50px;
background:red;
}
body{
height: 3000px;
}
</style>
<body>
<div class="header">
</div>
</body>
<script>
$(function(){
var flagdnow=true;
var flagup=true;
window.onscroll = function(){
var scroll = $(document).scrollTop();
if(scroll >= 400){
if(flagdnow){
$(".header").animate({top:0})
flagdnow=false;
flagup=true;
}
}
else{
if(flagup){
$(".header").animate({top:"-50px"})
flagdnow=true;
flagup=false;
}
}
}
})
</script>
</html>