showing results for - "scroll"
Michelle
08 Aug 2016
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}
queries leading to this page
scroll 23 scroll scrollscroll