Question

我已经尝试了一切来使我的jQuery代码工作，但似乎没有任何工作。我已经检查过以确保JavaScript脚本在浏览器源代码和它中加入和加载。我还查看了JavaScript控制台的错误，没有发现错误。网站位于＆＃34; http://twps.psadeaf.org/v3/＆＃34;。我加载的脚本是＆＃34; init.js＆＃34;。

我用下面的代码将脚本加入队列：

// 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()
   } 
});

Bellow是应该受其影响的代码：

＆＃13;

<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>

＆＃13;

我在Zurb中使用基础6作为我主题中的网站。最初的主题是JOINTSWP。当用户向下滚动页面时，我使用粘性插件使导航/标题粘在页面顶部。我正在使用＆＃34; .scroll（）api＆＃34;使用＆＃34; psad-nav＆＃34;来修改它和＆＃34; psad-nav-button＆＃34;类。使用＆＃34; .show（）＆＃34;和＆＃34; .hide（）＆＃34; api在向下滚动页面后显示和隐藏类。

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

Answer 1

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

Answer 2

您尚未定义if条件中使用的变量document.body.scrollTop。 scroll的值应为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() } });，以获取文档中的当前滚动位置。

{{1}}

Answer 3

谢谢大家的回复，我觉得很聪明！ ;）哈哈你必须原谅我，因为我一直在使用JavaScript，所以已经有一段时间了。我也很惊讶它没有在JavaScript控制台中抛出任何错误。我正在从关于tuts +的教程中获取代码。我没有注意到他们遗漏了变量的声明＆＃34;滚动＆＃34;。我修复了它并且它工作得很好，但后来也意识到我在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();
    }
});

现在这对我来说完美无瑕，谢谢所有帮助过我的人。这是实现我想要的最佳方式吗？如果没有，你会怎么做到这一点？

jQuery没有在我的WordPress网站上工作

3 个答案: