Gregory's ServerWith #CSS scroll-driven animations, custom properties and style queries we can realize a sticky header that disappears on scrolldown and shows again during and after a scrollup.
No JavaScript at all!
|
3 comments
@argyleink @fcalderan finally! Is it a chrome only feature or other browsers plan to implement it too?  |
@fcalderan gets even easier with scroll-state(sticky) queries!
```css
.stuck-top {
container-type: scroll-state;
position: sticky;
top: 20px;
> nav {
transition:
box-shadow .3s var(--ease-3),
margin .3s var(--ease-3),
border-radius .3s var(--ease-3);
@container scroll-state(stuck: top) {
box-shadow: var(--shadow-5);
border-radius: 10px;
margin: 20px;
}
}
}
```
try them in Canary: https://codepen.io/argyleink/pen/vYPzdGp
article out soon!
@fcalderan gets even easier with scroll-state(sticky) queries!
```css
.stuck-top {
container-type: scroll-state;
position: sticky;
top: 20px;
> nav {
transition:
box-shadow .3s var(--ease-3),
margin .3s var(--ease-3),
border-radius .3s var(--ease-3);
@container scroll-state(stuck: top) {
box-shadow: var(--shadow-5);
border-radius: 10px;
margin: 20px;
}
}
}
```
try them in Canary: https://codepen.io/argyleink/pen/vYPzdGp