jQueryは私のWordPressサイトでは動作していません

Question

私のjQueryコードを動作させるためにすべてを試しましたが、どれも動作していないようです。 JavaScriptスクリプトがブラウザのソースコードにエンキューされて読み込まれていることを確認しました。 JavaScriptコンソールでエラーを調べたところ、エラーは見つかりませんでした。サイトは "http://twps.psadeaf.org/v3/"にあります。私が読み込んでいるスクリプトは "init.js"です。

私は怒鳴るのコードでスクリプトをエンキューしています：

// Adding init file in the footer 
wp_enqueue_script('init-js', get_template_directory_uri() . '/assets/js/init.js', array('jquery'), '', true); 

その後は動作しませんjQueryのコードは次のとおりです。

jQuery(window).scroll(function() { 
    if (scroll >= 50) { 
    jQuery('.psad-nav-button').show() 
    jQuery(".psad-nav").hide() 
    } 
    if (scroll < 50) { 
    jQuery(".psad-nav").show() 
    jQuery('.psad-nav-button').hide() 
    } 
}); 

ベローは、それによってもたらされるべきコードです：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div data-sticky-container> 
 
    <div data-sticky data-options="marginTop:0;" data-sticky-on="small" style="width:100%"> 
 
    <div class="title-bar psad-nav" data-responsive-toggle="top-bar-menu" data-hide-for="<?php echo $breakpoint ?>"> 
 
     <button class="menu-icon" type="button" data-toggle></button> 
 
     <div class="title-bar-title"> 
 
     <?php _e('Menu', 'jointswp'); ?> 
 
     </div> 
 
    </div> 
 

 
    <div class="top-bar psad-nav" id="top-bar-menu"> 
 
     <div class="top-bar-left show-for-<?php echo $breakpoint ?>"> 
 
     <?php do_action('psad_site_logo', '200px'); ?> 
 
     </div> 
 
     <div class="top-bar-right"> 
 
     <?php joints_top_nav(); ?> 
 
     </div> 
 
    </div> 
 
    <button class="psad-nav-button expanded button" type="button"> 
 
    ^Navigation^
 
    </button> 
 
    </div> 
 
</div>

私のテーマのサイトでは、ZurbのFoundation 6を使用しています。元のテーマはJOINTSWPです。私は、スクロールプラグインを使用して、ユーザーがページを下にスクロールするときにナビゲーション/ヘッダーをページの上部に固定するようにしています。私は "psad-nav"と "psad-nav-button"クラスで ".scroll（）api"を使ってそれを変更しています。 ".show（）"および ".hide（）" APIを使用して、ページをスクロールした後にクラスを表示および非表示にします。

他のAPIを使用してみましたが、私のサイトでは何も動作しませんでした。

Answer 1

if条件で使用される変数scrollは定義されていません。 文書の現在のスクロール位置を取得するには、scrollの値はdocument.body.scrollTopにする必要があります。

jQuery(window).scroll(function() { 
    var scroll = document.body.scrollTop; 
    if (scroll >= 50) { 
    jQuery('.psad-nav-button').show() 
    jQuery(".psad-nav").hide() 
    } 
    if (scroll < 50) { 
    jQuery(".psad-nav").show() 
    jQuery('.psad-nav-button').hide() 
    } 
}); 

Answer 2

条件はscrollの値を比較していますが、scrollはグローバル名前空間の関数です。関数が整数より大きいか小さいかを調べることは意味をなさないので、falseを返します。あなたのifステートメントは常に偽であり、決して起こらない。

Answer 3

皆様のご返信ありがとうございます、私は本当にスマートに感じます！ ;）私はJavaScriptを使って作業しているので、あなたは私を許さなければなりません。 JavaScriptコンソールでエラーが発生していないことにも驚きました。私はtuts +のチュートリアルからコードを取っていました。私は変数 "スクロール"の宣言を放棄したことに気付かなかった。私はそれを修正し、それは素晴らしいですが、また、私は変数をjQueryのグローバル関数と同じ名前にしていることに気付きました。 JavaScriptコンソールで未定義の変数にエラーがスローされなかったのかどうかはわかりません。私は紛争を避けるために変数名を変更してしまった。

ベローは、私が一緒に行くことになったコードです：

jQuery(window).scroll(function() { 
    var psad_scroll = jQuery(this).scrollTop(); 
    var psad_nav = jQuery(".psad-nav"); 
    var psad_nav_button = jQuery(".psad-nav-button"); 

    function psad_show_nav() { 
     if (Foundation.MediaQuery.atLeast("medium")) { 
      psad_nav.show(); 
      psad_nav_button.addClass("hide") ; 
     } 
    } 

    function psad_hide_nav() { 
     if (Foundation.MediaQuery.atLeast("medium")) { 
      psad_nav_button.removeClass("hide"); 
      psad_nav.hide(); 
     } 
    } 

    if (psad_scroll >= 30) { 
     psad_hide_nav(); 
     psad_nav_button.on({ 
      click: psad_show_nav, 
      mouseenter: psad_show_nav 
     }); 

    } 
    if (psad_scroll < 30) { 
     psad_show_nav(); 
    } 
}); 

これが今の私のために完璧に動作、私を助けたことすべてに感謝。これは私が探していたものを達成するための最良の方法でしょうか？そうでない場合は、どうすればこのことを達成できますか？