下スクロールでヘッダ非表示、上スクロールで表示するやつ
JS
$(function () {
var menuHeight = $("#site-header").height();
var startPos = 0;
$(window).scroll(function () {
var currentPos = $(this).scrollTop();
if (currentPos > startPos) {
if ($(window).scrollTop() >= 100) {
$("#site-header").css("top", "-" + menuHeight + "px");
}
} else if (startPos > currentPos) {
$("#site-header").css("top", 0 + "px");
}
startPos = currentPos;
});
});
CSS
#site-header{
position: fixed;
top: 0;
left: 0;
width: 100%;
transition: 1s;
}
