jQuery не работает на моем сайте WordPress

Question

Я пробовал все, чтобы мои коды jQuery работали, и ничто из этого не работает. Я проверил, чтобы сценарий JavaScript зависел и загружался в исходный код браузера, и это так. Я также просмотрел консоль JavaScript для ошибок и ошибок не обнаружено. Сайт находится по адресу «http://twps.psadeaf.org/v3/». Загружаемый сценарий «init.js».

Я enqueuing скрипт с кодом ниже:

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

Я использую основание 6 по Zurb для сайтов в моей теме. Оригинальной темой является JOINTSWP. Я использую липкий плагин, чтобы сделать навигацию/заголовок в верхней части страницы, когда пользователь прокручивает страницу вниз. Я использую «.scroll() api», чтобы изменить его с помощью класса «psad-nav» и «psad-nav-button». Используя «.show()» и «.hide()» api, чтобы показать и скрыть классы после прокрутки страницы.

Я пробовал использовать другие api, и на моем сайте ничего не работает.

Answer 1

Вы не указали переменную scroll, используемую в условиях if. Значение прокрутки должно быть 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

Спасибо всем за их ответы, я чувствую себя настоящим умным! ;) haha. Вы должны простить меня, потому что я работал с 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(); 
    } 
}); 

Это теперь работает безупречно для меня, спасибо всем, что помогли мне. Будет ли это лучшим способом добиться того, что я искал? Если нет, как бы вы это сделали?