1body {
2 margin: 0;
3 padding: 0;
4 background: url(https://occ-0-325-395.1.nflxso.net/dnm/api/v6/6AYY37jfdO6hpXcMjf9Yu5cnmO0/AAAABaKr-dQAdVTt7fuGCgzntgBBrFce2DMW72dF86eO7EnXbFZvzmX2TPnQAg3HwAsvt7ZnDnP0nwuHOtPwpWGGOE22fXq2.webp?r=847) top/contain no-repeat;
5}
6
7nav {
8 position: -webkit-sticky;
9 position: sticky;
10 /* sticky or fixed are fine */
11 position: fixed;
12 top: 0;
13 height: 69px;
14 width: 100%;
15 background: linear-gradient(to bottom, #000, #0003 70%,#0000); /* background when scroll is in the top */
16 transition: background .5s; /* control how smooth the background changes */
17}
18
19nav.scrolled {
20 background: #0a0a0a;
21}
22
23main {
24 height: 200vh;
25}