Animated Sticky Header
Sticky header with shrink animation on scroll
Code
/* Add JS: window.addEventListener('scroll', function() { const header = document.querySelector('.sticky-header'); if (window.scrollY > 50) { header.classList.add('shrink'); } else { header.classList.remove('shrink'); } }); */
.sticky-header {
position: fixed;
top: 0;
left: 0;
width: 100%;
background: white;
padding: 20px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
transition: all 0.3s ease;
z-index: 100;
}
.sticky-header.shrink {
padding: 10px 20px;
box-shadow: 0 4px 15px rgba(0,0,0,0.15);
}
.header-content {
max-width: 1200px;
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
}
.header-logo {
font-size: 24px;
font-weight: bold;
color: #333;
transition: font-size 0.3s ease;
}
.sticky-header.shrink .header-logo {
font-size: 20px;
}HTML
<"attr-name"</span>>class</span>="tag"</span>>header</span> "attr-name"</span>>class</span>="sticky-header"</span>>
<"attr-name"</span>>class</span>="tag"</span>>div</span> "attr-name"</span>>class</span>="header-content"</span>>
<"attr-name"</span>>class</span>="tag"</span>>div</span> "attr-name"</span>>class</span>="header-logo"</span>>Logo</"attr-name"</span>>class</span>="tag"</span>>div</span>>
<"attr-name"</span>>class</span>="tag"</span>>nav</span>>Menu</"attr-name"</span>>class</span>="tag"</span>>nav</span>>
</"attr-name"</span>>class</span>="tag"</span>>div</span>>
</"attr-name"</span>>class</span>="tag"</span>>header</span>>
<"attr-name"</span>>class</span>="tag"</span>>div</span> "attr-name"</span>>style</span>="height: 2000px; padding-top: 100px;"</span>>
<"attr-name"</span>>class</span>="tag"</span>>h3</span>>Scroll down to see header shrink</"attr-name"</span>>class</span>="tag"</span>>h3</span>>
</"attr-name"</span>>class</span>="tag"</span>>div</span>>