jQuery 画面スクロールで固定ヘッダーを表示

• jQuery のスクロールイベントでクラス名を付与・解除することで、画面に追従する固定ヘッダーを設置する
• CSS では、Y軸マイナス方向にポジションを指定しておき最初は非表示の状態にしておく
• イベント発火時にイージングを付けて表示させる

HTML

<div class="scroll-header">
    // コンテンツ
</div>

JavaScript

$(window).scroll(function () {
  if($(window).scrollTop() > 110) {
    $('.scroll-header').addClass('scroll-header__fixed');
    $('body').addClass('scroll-header__enable');
  } else {
    $('.scroll-header').removeClass('scroll-header__fixed');
    $('body').removeClass('scroll-header__enable');
  }
});

CSS

.scroll-header {
    background: #fff;
    border-bottom: 1px solid #ccc;
    height: 60px;
    position: fixed;
    left: 0;
    top: -60px;
    transition: .5s;
    width: 100%;
    z-index: 99;

    &__fixed {
        top: 0;
    }
}