仅当用户在 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> ？ 如果是这样，那是非法的，您不应该在JavaScript 文件中包含<script>标签。

其次，在开始运行任何 JS 之前，您可能应该使用document.ready检查，您可以在该函数参数中传递$引用变量。 然后从那里，您可以检查$(window)的滚动状态（如果您想确保它在开始滚动时显示，请使用> 0而不是> 100像这样：

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

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

你没有发布你的 CSS，但确保#top div 是可见的（比如position: fixed; top: 0;或其他东西，确保它在窗口中可见，否则它会“显示”但不可见，因为它是屏幕外）。

第三，迂腐，你可能想让你的文件名更随意一些并且与句柄相关。 现在你称它为child-theme-script但文件名表明它唯一能做的就是隐藏与滚动相关的菜单。 将来您会以某种方式欣赏更简洁的命名约定！

第四，您不需要使用wp_register_script()除非您正在做一些奇特的工作，例如仅当页面上存在某些短代码，设置/未设置其他参数等wp_enqueue_script()使脚本出队/入队。 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 方面的一个快速 codepen 示例： https ://codepen.io/xhynk/pen/XWbmbgm