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 for Sites。 原始主题是JOINTSWP。 当用户向下滚动页面时，我正在使用粘性插件来使导航/标题停留在页面顶部。 我正在使用“ .scroll（）api”通过“ psad-nav”和“ psad-nav-button”类对其进行修改。 在向下滚动页面后，使用“ .show（）”和“ .hide（）” API来显示和隐藏类。

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

Answer 1

您的条件正在比较scroll的值，但是scroll是全局命名空间中的一个函数。 检查函数是否大于或小于整数是没有意义的，并返回false。 您的if语句始终为假，永远不会发生。

Answer 2

您尚未定义if条件中使用的变量scroll 。 scroll的值应为document.body.scrollTop以获取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 3

谢谢大家的回应，我真的很聪明！ ;）哈哈您必须原谅我，因为我一直在使用JavaScript。 我也很惊讶它没有在JavaScript控制台中引发任何错误。 我是从tuts +教程中获取代码的。 我没有发现他们忽略了变量“ scroll”的声明。 我修复了该问题，效果很好，但后来又意识到我要为变量命名与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();
    }
});

现在这对我来说是完美无缺的，谢谢所有帮助我的人。 这是实现我所寻找的最佳方法吗？ 如果没有，您将如何实现？