Skip to content

Commit 4cc21a4

Browse files
solygambassolygambas
committed
add sticky navbar
1 parent dd40553 commit 4cc21a4

File tree

4 files changed

+184
-1
lines changed

4 files changed

+184
-1
lines changed

‎25-sticky navigation/index.html

+58
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<link rel="stylesheet" href="style.css" />
7+
<title>Sticky Navigation</title>
8+
</head>
9+
<body>
10+
<nav class="nav">
11+
<div class="container">
12+
<h1 class="logo"><a href="#">My Website</a></h1>
13+
<ul>
14+
<li><a href="#" class="current">Home</a></li>
15+
<li><a href="#">About</a></li>
16+
<li><a href="#">Services</a></li>
17+
<li><a href="#">Contact</a></li>
18+
</ul>
19+
</div>
20+
</nav>
21+
<div class="hero">
22+
<div class="container">
23+
<h1>Welcome To My Website</h1>
24+
<p>
25+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur,
26+
delectus.
27+
</p>
28+
</div>
29+
</div>
30+
<section class="container content">
31+
<h2>Content One</h2>
32+
<p>
33+
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est numquam
34+
alias dolorem pariatur iusto porro doloribus sint? Enim deleniti dolore
35+
voluptates? Et perferendis laborum consequuntur deserunt consequatur
36+
doloremque nulla molestiae adipisci cum voluptatum eos, explicabo hic,
37+
alias repellat ipsam officia nesciunt est nostrum dolores sapiente.
38+
Animi inventore dolorum praesentium neque sunt, a, porro tempora
39+
voluptate corporis ipsa ad, illum assumenda voluptatibus et totam
40+
placeat ratione. Cum esse dignissimos eligendi culpa iure expedita
41+
dolorem? Beatae nesciunt dicta iure debitis expedita provident, possimus
42+
quo quisquam fugiat aliquid saepe voluptatem asperiores porro deserunt
43+
dolorem inventore ea recusandae corrupti! Ut delectus hic maiores
44+
maxime.
45+
</p>
46+
<h3>Content Two</h3>
47+
<p>
48+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga illum odit
49+
culpa error sunt exercitationem. Ea itaque, exercitationem aperiam ullam
50+
eveniet dolorem quae deleniti nostrum velit esse harum atque earum,
51+
molestiae iste quisquam blanditiis quibusdam minus dolor alias maxime
52+
quam. Est obcaecati dolores, alias corporis voluptatem doloremque odio
53+
porro qui!
54+
</p>
55+
</section>
56+
<script src="script.js"></script>
57+
</body>
58+
</html>

‎25-sticky navigation/script.js

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
const nav = document.querySelector(".nav");
2+
3+
const fixNav = () => {
4+
if (window.scrollY > nav.offsetHeight + 150) nav.classList.add("active");
5+
else nav.classList.remove("active");
6+
};
7+
8+
window.addEventListener("scroll", fixNav);

‎25-sticky navigation/style.css

+117
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,117 @@
1+
@import url("https://fonts.googleapis.com/css?family=Open+Sans&display=swap");
2+
3+
* {
4+
box-sizing: border-box;
5+
margin: 0;
6+
padding: 0;
7+
}
8+
9+
body {
10+
font-family: "Open Sans", sans-serif;
11+
color: #222;
12+
padding-bottom: 50px;
13+
}
14+
15+
.container {
16+
max-width: 1200px;
17+
margin: 0 auto;
18+
}
19+
20+
.nav {
21+
position: fixed;
22+
background-color: #040403;
23+
top: 0;
24+
left: 0;
25+
right: 0;
26+
transition: all 0.3s ease-in-out;
27+
}
28+
29+
.nav .container {
30+
display: flex;
31+
justify-content: space-between;
32+
align-items: center;
33+
padding: 20px 0;
34+
transition: all 0.3s ease-in-out;
35+
}
36+
37+
.nav ul {
38+
display: flex;
39+
list-style-type: none;
40+
align-items: center;
41+
justify-content: center;
42+
}
43+
44+
.nav a {
45+
color: #fff;
46+
text-decoration: none;
47+
padding: 7px 15px;
48+
transition: all 0.3s ease-in-out;
49+
}
50+
51+
.nav.active {
52+
background-color: #fff;
53+
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
54+
}
55+
56+
.nav.active a {
57+
color: #000;
58+
}
59+
60+
.nav.active .container {
61+
padding: 10px 0;
62+
}
63+
64+
.nav a.current,
65+
.nav a:hover {
66+
color: #c0392b;
67+
font-weight: bold;
68+
}
69+
70+
.hero {
71+
background-image: url("https://images.unsplash.com/photo-1554744512-d6c603f27c54?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1200&q=80");
72+
background-repeat: no-repeat;
73+
background-size: cover;
74+
background-position: bottom center;
75+
height: 100vh;
76+
color: #fff;
77+
display: flex;
78+
justify-content: center;
79+
align-items: center;
80+
text-align: center;
81+
position: relative;
82+
margin-bottom: 20px;
83+
z-index: -2;
84+
}
85+
86+
.hero::before {
87+
content: "";
88+
position: absolute;
89+
top: 0;
90+
left: 0;
91+
width: 100%;
92+
height: 100%;
93+
background-color: rgba(0, 0, 0, 0.6);
94+
z-index: -1;
95+
}
96+
97+
.hero h1 {
98+
font-size: 41px;
99+
margin: -20px 0 20px;
100+
}
101+
102+
.hero p {
103+
font-size: 20px;
104+
letter-spacing: 1px;
105+
}
106+
107+
.content h2,
108+
.content h3 {
109+
font-size: 150%;
110+
margin: 20px 0;
111+
}
112+
113+
.content p {
114+
color: #555;
115+
line-height: 30px;
116+
letter-spacing: 1.2px;
117+
}

‎README.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@
3030
| 22 | [Drawing App](https://github.com/solygambas/html-css-fifty-projects/tree/master/22-drawing%20app) | [Live Demo](https://codepen.io/solygambas/pen/wvzREMx) |
3131
| 23 | [Kinetic Loader](https://github.com/solygambas/html-css-fifty-projects/tree/master/23-kinetic%20loader) | [Live Demo](https://codepen.io/solygambas/pen/JjRwVLW) |
3232
| 24 | [Content Placeholder](https://github.com/solygambas/html-css-fifty-projects/tree/master/24-content%20placeholder) | [Live Demo](https://codepen.io/solygambas/pen/ExgGzaX) |
33-
| 25 | [Sticky Navbar](https://github.com/solygambas/html-css-fifty-projects/tree/master/sticky-navigation) | [Live Demo](/sticky-navbar/) |
33+
| 25 | [Sticky Navbar](https://github.com/solygambas/html-css-fifty-projects/tree/master/25-sticky%20navigation) | [Live Demo](https://codepen.io/solygambas/pen/VwKqJmw/) |
3434
| 26 | [Double Vertical Slider](https://github.com/solygambas/html-css-fifty-projects/tree/master/double-vertical-slider) | [Live Demo](/double-vertical-slider/) |
3535
| 27 | [Toast Notification](https://github.com/solygambas/html-css-fifty-projects/tree/master/toast-notification) | [Live Demo](/toast-notification/) |
3636
| 28 | [Github Profiles](https://github.com/solygambas/html-css-fifty-projects/tree/master/github-profiles) | [Live Demo](/github-profiles/) |

0 commit comments

Comments
 (0)