└── nav-styles-on-scroll
├── index.html
├── mountain-large.jpg
└── styles.css
/nav-styles-on-scroll/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
7 |
8 | Document
9 |
10 |
11 |
12 |
37 |
38 |
39 |
40 |
41 |
48 |
49 |
--------------------------------------------------------------------------------
/nav-styles-on-scroll/mountain-large.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jlop007/change-styles-on-scroll-JS/45aeb1c9b057fdb2500f9fbd2b1fd33ec853d4ce/nav-styles-on-scroll/mountain-large.jpg
--------------------------------------------------------------------------------
/nav-styles-on-scroll/styles.css:
--------------------------------------------------------------------------------
1 | *,
2 | *::before,
3 | *::after{
4 | margin: 0;
5 | padding: 0;
6 | box-sizing: border-box;
7 | }
8 |
9 | html{
10 | font-family: 'Roboto', sans-serif;
11 | font-size: 10px;
12 | }
13 |
14 | header{
15 | width: 100%;
16 | position: fixed;
17 | top: 0;
18 | left: 0;
19 | transition: background-color .5s ease;
20 | z-index: 1000;
21 | }
22 |
23 | .container{
24 | width: 100%;
25 | max-width: 120rem;
26 | margin: 0 auto;
27 | padding: 0 1.5rem;
28 | }
29 |
30 | .nav{
31 | width: 100%;
32 | height: 10rem;
33 | display: flex;
34 | align-items: center;
35 | justify-content: space-between;
36 | border-bottom: 2px solid rgba(255,255,255,.05);
37 | transition: height .5s ease;
38 | }
39 |
40 | .nav a{
41 | text-decoration: none;
42 | color: #fff;
43 | font-size: 1.6rem;
44 | }
45 |
46 | .nav .logo{
47 | font-size: 3.5rem;
48 | font-weight: bold;
49 | }
50 |
51 | .nav-list{
52 | list-style: none;
53 | display: flex;
54 | margin-right: auto;
55 | margin-left: 4rem;
56 | }
57 |
58 | .nav-link{
59 | margin: 0 2rem;
60 | position: relative;
61 | }
62 |
63 | .nav-link::after{
64 | content: '';
65 | width: 100%;
66 | height: 2px;
67 | background-color: #fff;
68 | position: absolute;
69 | left: 0;
70 | bottom: -3px;
71 | transform: scaleX(0);
72 | transform-origin: left;
73 | transition: transform .5s ease;
74 | }
75 |
76 | .nav-link:hover::after{
77 | transform: scaleX(1);
78 | }
79 |
80 | #nav-cta{
81 | display: inline-block;
82 | background-color: #fff;
83 | color: #313131;
84 | padding: 1rem 2rem;
85 | border-radius: 2rem;
86 | transition: background-color .5s ease;
87 | }
88 |
89 | #nav-cta:hover{
90 | background-color: #d3d3d3;
91 | }
92 |
93 |
94 | /*Apply styles after scroll*/
95 | .scrolling-active{
96 | background-color: #fff;
97 | box-shadow: 0 3px 1rem rgba(0,0,0,.1);
98 | }
99 |
100 | .scrolling-active .nav{
101 | height: 6.6rem;
102 | }
103 |
104 | .scrolling-active .nav a{
105 | color: #313131;
106 | }
107 |
108 | .scrolling-active #nav-cta{
109 | background-color: #313131;
110 | color: #fff;
111 | }
112 |
113 | .scrolling-active #nav-cta:hover{
114 | background-color: #151515;
115 | }
116 |
117 | .scrolling-active .nav-link::after{
118 | background-color: #313131;
119 | }
120 |
121 | /*Apply styles after scroll end*/
122 |
123 |
124 | /* Hero Demo Content*/
125 | .hero{
126 | width: 100%;
127 | height: 100vh;
128 | background: url("mountain-large.jpg") center no-repeat;
129 | background-size: cover;
130 | position: relative;
131 | }
132 |
133 | .hero::after{
134 | content: '';
135 | width: inherit;
136 | height: inherit;
137 | position: absolute;
138 | top: 0;
139 | left: 0;
140 | background-color: rgba(0,0,0,.5);
141 | }
142 |
143 | .demo-content{
144 | width: 100%;
145 | height: 200vh;
146 | background-color: #fff;
147 | }
148 | /* Hero end*/
--------------------------------------------------------------------------------