<script>
$(document).ready(function(){
fixed_menu = 0;
$(window).scroll(function(){
if( $(this).scrollTop() > 70 ){
if(fixed_menu==0){
$('#headerwrap_fixed').slideDown(400);
fixed_menu=1;
}
} else {
if(fixed_menu){
$('#headerwrap_fixed').slideUp(200);
fixed_menu=0;
}
}
});
});
</script>
<style>
#headerwrap_fixed {
position: fixed;
z-index: 300;
top:0;
left:0;
width: 100%;
height: 90px;
font-size: 60px;
line-height: 70px;
background-color: #C00;
text-align: center;
display: none;
color: #FFF;
}
</style>
<div id="headerwrap_fixed">header</div>
<h1>スクロールでヘッダー表示</h1>
<div>70px以上スクロールすると画面上部にヘッダーが表示されます。</div>
<div style="height:400px;"></div>
<div>スクロールの位置が0pxに戻るとヘッダーが隠れます。</div>