After spending countless hours researching online, I've been struggling to implement header effects on scroll without using JavaScript. My goal is to achieve a simple effect where the header reduces in height, the logo changes, and a colored border is added at the bottom. Despite my efforts to make it work by altering the header's height on scroll using JS, I couldn't get the desired response from the header. I understand that these ambitions might be challenging for someone new to web design like me, but I'm determined to learn how to accomplish this. Any guidance or recommendations for useful online resources would be greatly appreciated.
To avoid clutter, I'm only including my HTML and CSS here. I can provide additional details from my JavaScript file if necessary. I've also removed some CSS related to the unsuccessful JS attempts. Thank you in advance for your assistance.
<header>
<div id="nav">
<div id="nav_left">
<a href="index.html">HOME</a>
<a href="services.html">SERVICES</a>
<a href="portfolio.html">PORTFOLIO</a>
</div>
<a href="index.html" id="logo" class="noHover"><img src="images/logo_6_small.png" alt="Claire Crawford"
id="logo_Claire" /></a>
<div id="nav_right">
<a href="blog.html">BLOG</a>
<a href="about.html">ABOUT</a>
<a href="contact.html">GET IN TOUCH</a>
</div>
</div>
</header>
header {
height: 160px;
position: fixed;
top: 0;
width: 100%;
background: white;
/* border-bottom: 15px solid rgb(197, 179, 55) */
}
/* header border on scroll
header.fixed.scrolled .header_bottom .container_inner {
border-bottom: 1px solid #0a0a0a;
} */
/* header.sticky {
height: 120px;
} */
/* header {
transition: padding 300ms ease;
} */