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

我还有这个代码，我将其添加到自定义插件中。请注意，我使用的是 child 主题。我创建了一个文件夹/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，但请确保 #top div 是可见的(如 position: fixed; top: 0; 或其他东西，确保它在窗口中可见，否则它将“显示”但不可见，因为它在屏幕外)。

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

第四，不需要使用 wp_register_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