【jQuery】スクロールでclassを追加するjavascript

スクロール時に任意箇所にclassを追加

スクロール時にヘッダーデザインを変更するなどの際に、classを追加する場合のjavascriptコード

$(window).scroll(function(){
  if ($(window).scrollTop() > 200) {
    $('#header').addClass('fixed');
  } else {
    $('#header').removeClass('fixed');
  }
});

WordPressの場合のサンプル

;(function($){
  $(window).scroll(function(){
    if ($(window).scrollTop() > 200) {
      $('#header').addClass('fixed');
    } else {
      $('#header').removeClass('fixed');
    }
  });
})(jQuery);

200pxスクロールでclassを追加します。

追加される.fixedクラスをcssで定義します。

.fixed{
  background: #111;
}