javascript - 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 for Sites 的 Foundation 6。最初的主题是 JOINTSWP。我正在使用粘性插件使导航/标题在用户向下滚动页面时粘在页面顶部。我正在使用“.scroll() api”通过“psad-nav”和“psad-nav-button”类对其进行修改。使用“.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()
   } 
});