下スクロールでヘッダ非表示、上スクロールで表示するやつ
JS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
$(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
|
1 2 3 4 5 6 7 |
#site-header{ position: fixed; top: 0; left: 0; width: 100%; transition: 1s; } |
