スクロールでクラスを追加/削除する（Wordpress）

Question

私はウィジェットに1つのクラスを追加させ、ユーザーがページを50px下にスクロールし、ユーザーが再びスクロールしたときにそのプロセスを逆転させようとしています。

ウェブサイト：​​

プラットフォーム： Wordpressの

テーマ： Customizr-子、私はそれに適用されるheader-widgetクラスを持っている影響にしようとしている

マイウィジェット。

$(function() { 
    //caches a jQuery object containing the header element 
    var header = $(".header-widget"); 
    $(window).scroll(function() { 
     var scroll = $(window).scrollTop(); 

     if (scroll >= 50) { 
      $(".header-widget").removeClass("header-widget-tallheader"); 
      $(".header-widget").addClass("header-widget-shortheader"); 

     } else { 
      $(".header-widget").removeClass("header-widget-shortheader"); 
      $(".header-widget").addClass("header-widget-tallheader"); 
     } 
    }); 
}); 

を標準[1]、私は明らかにその制限を上書きします「スクリプトのnスタイル」プラグインをインストールすることを選択したとして、ワードプレスのスクリプトタグの使用が禁止されているとおり：This forum threadを作成するために私を導きました。私はheadタグに表示されるように上記のコードを挿入しました。

しかし、残念ながら、何も起こっていません。このスクリプトタグはまだ処理されていないのですか？私のコーディングは間違っている？または、AJAX [2]を使用する必要がありますか？後者の場合は、W3SchoolsのAJAXチュートリアル[3]を読みましたが、この状況でどのように適用するかはわかりませんでした。

誰でも手伝っていただけるとありがとうございます。私はこれを見て何時間も費やしてきましたが、まだ初心者であるようですので、できるだけ具体的な回答があれば、感謝しています。

脚注：

ためのフォーラムの評判制限に、リンクは私がすることはできません含めるしようとしていたが：

[1] https://www.godaddy.com/garage/webpro/wordpress/3-ways-to-insert-javascript-into-wordpress-pages-or-posts/

[2] https://stackoverflow.com/questions/28356137/change-css-when-scroll-down-using-php

[ 3] http://www.w3schools.com/ajax/default.asp

Answer 1

コードが正しいその前に$ = jQuery;を追加してください。

修正されたコード

$ = jQuery; 
$(function() { 
    //caches a jQuery object containing the header element 
    var header = $(".header-widget"); 
    $(window).scroll(function() { 
     var scroll = $(window).scrollTop(); 

     if (scroll >= 50) { 
      $(".header-widget").removeClass("header-widget-tallheader"); 
      $(".header-widget").addClass("header-widget-shortheader"); 

     } else { 
      $(".header-widget").removeClass("header-widget-shortheader"); 
      $(".header-widget").addClass("header-widget-tallheader"); 
     } 
    }); 
}); 

Answer 2

にスクリプトを変更してみてください：

jQuery(function() { 
    //caches a jQuery object containing the header element 
    var header = jQuery(".header-widget"); 
    jQuery(window).scroll(function() { 
     var scroll = jQuery(window).scrollTop(); 

     if (scroll >= 50) { 
      jQuery(".header-widget").removeClass("header-widget-tallheader"); 
      jQuery(".header-widget").addClass("header-widget-shortheader"); 

     } else { 
      jQuery(".header-widget").removeClass("header-widget-shortheader"); 
      jQuery(".header-widget").addClass("header-widget-tallheader"); 
     } 
    }); 
}); 

のjQueryのバージョンをwordpressのdoesn'tに同梱されて働いている、$