我正在嘗試創建一個效果，其中菜單是隱藏的，并且僅在用戶開始滾動時顯示。我似乎無法找出我的代碼無法正常工作的原因。我有以下j查詢代碼：<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 并添加了以下文件菜單隱藏滾動.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');}斷續器#top {display:none;}我是一個初學者，在這一點上，我被困在希望有人能幫助我。
1 回答
富國滬深
TA貢獻1790條經驗 獲得超9個贊
我想提出幾個問題和小問題。
首先，您在問題中編寫了一個奇怪的“jQuery代碼”。您的文件是否包含 ？如果是這樣，那是非法的，你不應該在你的JavaScript文件中有標簽。.js<script src="http://code.jquery.com/jquery-1.10.2.js"> /* … */ </script><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，但要確保div是可見的（喜歡或什么，確保它在窗口中可見，否則它將“顯示”，但由于它不在屏幕上而不可見）。#topposition: fixed; top: 0;
第三，迂腐，您可能希望使文件名更加任意并且與句柄相關?，F在你調用它，但文件名將表明它所做的唯一事情是隱藏與滾動相關的菜單。將來，您將以某種方式欣賞更簡潔的命名約定！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 端為您提供的快速代碼筆示例：https://codepen.io/xhynk/pen/XWbmbgm
- 1 回答
- 0 關注
- 72 瀏覽
添加回答
舉報
0/150
提交
取消