I am working on creating a navigation bar that gradually fades in as the user scrolls through it on larger screens. I want to maintain some level of transparency for the navigation bar and have full opacity for the font within it.
Is there a way to achieve this effect without the entire navigation bar becoming completely opaque during the scroll action?
$(window).resize(function() {
if ($(window).width() < 480) {
$('.navbar').removeClass("navbar-fixed-top");
$('.navbar').css('opacity', 1)
} else {
$('.navbar').css('opacity', 0)
}
});
$(document).on('scroll', function(e) {
if ($(window).width() > 480)
$('.navbar').css('opacity', ($(document).scrollTop() / 900));
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>