css スクロール时ヘッダー切り替え

Posted 2021-05-13

// スクロール時ヘッダーを切り替えます
$(function() {
  var $win = $(window),
      $header = $('header'),
      animationClass = 'is-animation';

  $win.on('load scroll', function() {
    var value = $(this).scrollTop();
    if ( value > 100 ) {
      $header.addClass(animationClass);
    } else {
      $header.removeClass(animationClass);
    }
  });
});

/*---------- ヘッダー切り替え後 ----------*/
header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2;
  width: 100%;
  background: #fff;
  transition: .3s;
}

header h1 {
  color: #fff;
  transition: .3s;
}
.is-animation {
  height: 100px;
}