ホーム  >  JS

下スクロールでヘッダ非表示、上スクロールで表示するやつ

公開日

最終更新日

カテゴリー JS

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;
}

カテゴリー:JS

関連投稿