javascript - 试图让我的 bootstrap 导航栏背景在我的 wordpress 主题中滚动时淡入淡出

Question

到目前为止我有这段代码:

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');
}
});

这在我的 functions.php 中:

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' );

我可以在页面源代码的 head 部分看到正在加载的脚本，但还是出问题了？

Answer 1

通过将此添加到我的 js 文件解决:

(function($) {          
    $(document).ready(function(){                    
        $(window).scroll(function(){                          
            if ($(this).scrollTop() > 300) {
                $('.navbar').addClass('hide');
            } else {
                $('.navbar').removeClass('hide');
            }
        });
    });
})(jQuery);