body{
height: 2000px;
margin:0;
}
header{
background: #ccc;
font-size: 20px;
font-weight: bold;
padding: 20px;
text-align: center;
transition: all 0.3s ease;
position: fixed;
top: 0;
left:0;
right: 0;
}
section{
border-top: solid 1px #ccc;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
font-size: 28px;
}
jQuery(function($){
var hsize = $('header').innerHeight();//paddingを含めた高さを取得
var pos = 0;
$(window).on('scroll', function(){
var currentPos = $(this).scrollTop();
if(currentPos < pos || currentPos == 0 ){
//上スクロール時の処理
$("header").css({"top":0});
}else{
//下スクロール時の処理
$("header").css({'top' : "-" + hsize + "px" });
}
pos = currentPos;
});
});
【jquery】上にスクロールしたらヘッダー出す
2020/01/10