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的基金会6在我的主题网站。最初的主题是JOINTSWP。当用户滚动页面时，我正在使用粘性插件来使导航/标题粘贴到页面的顶部。我使用".scroll() api“用”psad“和”psad按钮“类来修改它。使用".show()“和".hide()”api在向下滚动页面后显示和隐藏类。

我试过使用其他api，但在我的网站上没有任何效果。

Answer 1

您还没有定义在if条件中使用的变量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();
    }
});

这对我来说是完美无缺的，谢谢你帮了我的忙。这会是实现我想要的目标的最好方法吗？如果没有，你将如何做到这一点？