试图让我的引导程序navabar背景淡出滚动在我的wordpress主题

Trying to have my bootstrap navabar background fade in on scroll in my wordpress theme

本文关键字：我的 滚动 wordpress 主题 淡出 navabar 引导程序 背景      更新时间：2023-09-26

到目前为止，我有以下代码：

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);
相关文章：