[jquery]ある程度スクロールしたら非表示にしていたヘッダーを表示させる
<script> $(function() { var nav = $('#header-item'); //スクロールが400に達したらクラスを付与 $(window).scroll(function () { if ($(this).scrollTop() > 400) { nav.addClass('header-item-height'); } else { nav.removeClass('header-item-height'); } }); }); </script>
#header-item { height: 50px; overflow:hidden; } .header-item-height { height: 80px; }
上記コードでユーザが400pxより下にスクロールすると、header-item部分が50pxから80pxになる
またユーザが400pxよりも上にスクロールするとheader-item-heightクラスが削除されてheader-item部分が50pxに戻る