Как отображать меню только когда пользователь прокручивает страницу в WordPress

Question

Я пытаюсь создать эффект, когда меню скрыто и отображается только тогда, когда пользователь начинает прокручивать. Я не могу понять, почему мой код не работает. У меня есть следующий jQuery код:

<script src="http://code.jquery.com/jquery-1.10.2.js">
jQuery(document).scroll(function () {
var y = $(this).scrollTop();
if (y > 100) {
    $('#top').fadeIn();
} else {
    $('#top').fadeOut();
}

});

</script>

У меня также есть этот код, который я добавил в пользовательский плагин. Обратите внимание, чем я пользуюсь детской темой. Я создал папку / js и добавил следующий файл menu-hide-scroll. js.

add_action( 'wp_enqueue_scripts', 'show_menu_scroll_script' );
function show_menu_scroll_script() {
wp_register_script(
   'child-theme-script', 
   get_stylesheet_directory_uri() . '/js/menu-hide-scroll.js', 
   array('jquery') 
);

wp_enqueue_script('child-theme-script');
}

CSS

#top {display:none;}

Я являюсь начинающий, и в этот момент я застрял, надеюсь, кто-то поможет мне.

Answer 1

Есть пара вопросов и второстепенных моментов, которые я хотел бы высказать.

Прежде всего, вы задали странный "jQuery код" в своем вопросе. Ваш файл .js содержит <script src="http://code.jquery.com/jquery-1.10.2.js"> /* … */ </script>? Если это так, это незаконно, у вас не должно быть <script> тегов внутри ваших JavaScript файлов.

Во-вторых, вы, вероятно, должны использовать document.ready проверьте, прежде чем запускать любой JS, вы можете передать ссылочную переменную $ в этом аргументе функции. Затем оттуда вы можете проверить состояние прокрутки $(window) (и использовать > 0 вместо > 100, если хотите убедиться, что оно отображается при запуске прокрутки. Примерно так:

jQuery(document).ready(function($){
    $(window).on('scroll', function(){
        var y = $(window).scrollTop();

        if( y > 0 ){
            $('#top').fadeIn();
        } else {
            $('#top').fadeOut();
        }
    });
});

Вы не опубликовали свой CSS, но убедитесь, что div #top виден (например, position: fixed; top: 0; или что-то в этом роде, убедитесь, что он виден в окне, в противном случае он будет "отображаться", но не будет виден, так как off screen).

В-третьих, pedanti c, вы, вероятно, захотите сделать имена файлов более произвольными и связанными с дескриптором. Прямо сейчас вы называете это child-theme-script, но имя файла будет укажите, что единственное, что он делает, это скрывает меню, относящееся к прокрутке. В будущем вы по достоинству оцените несколько более лаконичное соглашение об именах!

В-четвертых, вам не нужно использовать wp_register_script(), если вы не выполняете сложную работу, такую ​​как снятие очереди / постановка в очередь сценария, только если на странице есть определенные шорткоды, другие параметры установлены / не установлены, и т. Д. c. wp_enqueue_script() обрабатывает регистрация сценария для вас (обратите внимание, я изменил имя файла и имя функции в этом фрагменте):

add_action( 'wp_enqueue_scripts', 'load_child_theme_scripts' );
function load_child_theme_scripts() {
    wp_enqueue_script(
        'child-theme-script',
        get_stylesheet_directory_uri() . '/js/child-theme-script.js',
        array('jquery')
    );
}

Вот краткий пример кода для вас со стороны JavaScript: https://codepen.io/xhynk/pen/XWbmbgm