Hello! I am currently working on designing my photography website and I have a cool feature in mind. I want the header to change as the user scrolls down the page. Here is how I structured the HTML menu/header:
<div id="menu" class="fluid">
header/menu content
</div>
To style it, I used CSS to create a black background that is transparent and set a specific height for the menu:
#menu {
height: 100px;
background-color: rgba(0,0,0,0.1);
}
Now, with JavaScript, I managed to make the header collapse to 75 pixels when the user scrolls down more than 5 pixels. When they scroll back up, it expands back to 100px. This is the JavaScript code I used:
<script>
// Minimize menu on scroll
$(window).on('scroll', function () {
var scrollTop = $(window).scrollTop();
if (scrollTop > 5) {
$('#menu').stop().animate({height: "75px"},150);
} else {
$('#menu').stop().animate({height: "100px"},150);
}
});
</script>
I'm wondering if there's an easy way to adjust the background transparency along with the menu height changes. Since I don't have much experience with JavaScript, any guidance on what code to incorporate would be greatly appreciated.
Thank you in advance for your help! Apologies if this question has been asked before, I couldn't find relevant information using my search keywords.
Sincerely, Elmigo