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!
|
2 posts total
A #CSS-only version of minesweeper for Chrome (but made with sharks 🦈). https://codepen.io/fcalderan/full/dyxPOwV You can arrange the sharks as you prefer, the other cells will update their numbers automa(g)ically. |
@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