HTML
<body>直下
<div class="gmenu">
コンテンツ
</div>
css
.gmenu {
position: fixed;
width: 100%;
z-index: 100;
top: -100px; //gmenuの高さ
height: 100px;
}
.gmenu.fixed {
position: fixed;
top: 0;
left: 0;
}
js
$(function () {
var headNav = $('.gmenu');
$(window).on('load scroll', function () {
if ($(this).scrollTop() > 500 && headNav.hasClass('fixed') == false) {
headNav.css({ "top": '-100px' });
headNav.addClass('fixed');
headNav.animate({ "top": 0 }, 600);
}
else if ($(this).scrollTop() < 300 && headNav.hasClass('fixed') == true) {
headNav.removeClass('fixed');
headNav.animate({ "top": -100 }, 600);
headNav.css({ "top": '-100px' });
}
});
});
