gpt4 book ai didi

javascript - WordPress中如何仅在用户滚动页面时显示菜单

转载 作者:行者123 更新时间:2023-12-02 21:48:56 25 4
gpt4 key购买 nike

我正在尝试创建一种效果,其中菜单被隐藏,并且仅在用户开始滚动时才显示。我似乎无法找出为什么我的代码不起作用。我有以下 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;}

我是初学者,目前我陷入困境,希望有人能帮助我。

最佳答案

我想提出几个问题和小观点。

首先,您在问题中编写了一个奇怪的“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

关于javascript - WordPress中如何仅在用户滚动页面时显示菜单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60177033/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com