到目前为止,我有以下代码:
CSS
.navbar {
background-color:rgba(51, 49, 50, 1);transition: background-color 2s ease 0s;
}
.navbar.hide {
background-color:rgba(51, 49, 50, 0);transition: background-color 2s ease 0s;
}
Javascript
$(window).scroll(function() {
if($(this).scrollTop() > 300) {
$('.navbar').addClass('hide');
} else {
$('.navbar').removeClass('hide');
}
});
这在我的函数中。hp:
function wpbootstrap_scripts_with_jquery()
{
// Register the script like this for a theme:
wp_register_script( 'custom-script', get_template_directory_uri() . '/bootstrap/js/bootstrap.js', array( 'jquery' ) );
wp_register_script( 'scrollfade', get_template_directory_uri() . '/js/scrollfade.js');
// For either a plugin or a theme, you can then enqueue the script:
wp_enqueue_script( 'custom-script' );
wp_enqueue_script( 'scrollfade' );
}
add_action( 'wp_enqueue_scripts', 'wpbootstrap_scripts_with_jquery' );
add_action( 'wp_enqueue_scripts', 'wpbootstrap_scrollfade' );
我可以看到脚本加载在页面源代码的头部分,但还是出了什么问题?
通过将其添加到我的js文件中来解决:
(function($) {
$(document).ready(function(){
$(window).scroll(function(){
if ($(this).scrollTop() > 300) {
$('.navbar').addClass('hide');
} else {
$('.navbar').removeClass('hide');
}
});
});
})(jQuery);