Votre navigateur ne prend pas en charge cette démonstration.
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Harum, perspiciatis blanditiis accusamus commodi consectetur id tempora rem iure eligendi quos eos et autem ratione exercitationem earum laborum ad a sequi!
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Harum, perspiciatis blanditiis accusamus commodi consectetur id tempora rem iure eligendi quos eos et autem ratione exercitationem earum laborum ad a sequi!
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Harum, perspiciatis blanditiis accusamus commodi consectetur id tempora rem iure eligendi quos eos et autem ratione exercitationem earum laborum ad a sequi!
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Harum, perspiciatis blanditiis accusamus commodi consectetur id tempora rem iure eligendi quos eos et autem ratione exercitationem earum laborum ad a sequi!
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Harum, perspiciatis blanditiis accusamus commodi consectetur id tempora rem iure eligendi quos eos et autem ratione exercitationem earum laborum ad a sequi!
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Harum, perspiciatis blanditiis accusamus commodi consectetur id tempora rem iure eligendi quos eos et autem ratione exercitationem earum laborum ad a sequi!
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Harum, perspiciatis blanditiis accusamus commodi consectetur id tempora rem iure eligendi quos eos et autem ratione exercitationem earum laborum ad a sequi!
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Harum, perspiciatis blanditiis accusamus commodi consectetur id tempora rem iure eligendi quos eos et autem ratione exercitationem earum laborum ad a sequi!
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Harum, perspiciatis blanditiis accusamus commodi consectetur id tempora rem iure eligendi quos eos et autem ratione exercitationem earum laborum ad a sequi!
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Harum, perspiciatis blanditiis accusamus commodi consectetur id tempora rem iure eligendi quos eos et autem ratione exercitationem earum laborum ad a sequi!
<header>
<div>
<h1>CSS shrink sticky header</h1>
<nav>
<a href="#">Rubrique 1</a>
<a href="#">Rubrique 2</a>
<a href="#">Rubrique 3</a>
<a href="#">Rubrique 4</a>
<a href="#">Rubrique 5</a>
</nav>
</div>
</header>
....
*{
box-sizing: border-box
}
header{
position: fixed;/*bug sticky donc fixed*/
top: 0;
right:0;
left:0;
background-color: #e8e8e8;
display:grid;
}
header + * {margin-top: 15rem;}
h1{
animation: font-h1 both linear;
font-size: clamp(1.5rem,1vw + 1rem,2rem)
}
@keyframes font-h1 {
to {
font-size: clamp(1.25rem, 1.225rem + 0.125vw, 1.375rem)
}
}
nav{
display: flex;
flex-flow: wrap;
gap: .5rem;
padding-bottom: .5rem;
animation: font-nav both linear;
font-size: clamp(1rem, 0.975rem + 0.125vw, 1.125rem);
}
@keyframes font-nav {
to {font-size:clamp(0.75rem, 0.725rem + 0.125vw, 0.875rem)
}
}
h1,nav,header>div{
animation-timeline: scroll();
animation-range: 0 20%
}
nav a{
color:currentcolor
}
header>div{
display:grid;
place-items: center;
animation: nav both linear
}
@media (min-width:64rem){
nav{
padding:unset
}
@keyframes nav {
to {
grid:minmax(3rem,1fr)/ 1fr 1fr
}
}
}