スクロールすると上から降りてくる

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

« フッターを下に固定｜コンテンツが少ない時

iframe縦横比固定・div正方形維持（レスポンシブ）/画像正方形固定 »

2021/08/21更新