Skip to content

Commit 15731e0

Browse files
selimbiberselimbiber
committed
Finish the Sticky Navbar project.
1 parent d386cd4 commit 15731e0

File tree

6 files changed

+285
-0
lines changed

6 files changed

+285
-0
lines changed

‎StickyNavbar/README.md

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
# Sticky Navbar | Yapışkan Gezinme Çubuğu
2+
3+
## Project Description | Proje Açıklaması
4+
5+
Kullanıcının sitenin alt kısımlarına inerek karşılama ekranını geçmesini algılayıp otomatikman üst gezinme çubuğunun arka plan rengini değiştiren bu uygulamayı [orijinal hali](https://www.100jsprojects.com/project/sticky-navbar)ne uygun şekilde yapmaya çalıştım.
6+
7+
### [Live Preview Link | Canlı Önizleme Bağlantısı](https://htmlpreview.github.io/?https://github.com/selimbiber/PureJavaScriptProjects/blob/main/StickyNavbar/index.html)

‎StickyNavbar/images/github-icon.svg

+3
Loading

‎StickyNavbar/images/keyboard-background.jpg

896 KB
Loading

‎StickyNavbar/index.html

+126
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,126 @@
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="styles.css" />
7+
<title>Sticky Navbar</title>
8+
</head>
9+
<body>
10+
<main id="container">
11+
<nav id="navbar">
12+
<a id="homepage-link" href="#">Selim Biber</a>
13+
<ul id="other-links">
14+
<li><a href="#">About</a></li>
15+
<li><a href="#">Blog</a></li>
16+
<li><a href="#">Contanct</a></li>
17+
</ul>
18+
</nav>
19+
<section id="hero-section">
20+
<p id="hero-text">Welcome to my website!</p>
21+
</section>
22+
<article id="article">
23+
<p class="text">
24+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem est
25+
odit eligendi corrupti, voluptate repudiandae quidem, veritatis fugit
26+
cum aliquam exercitationem quas! Suscipit iusto culpa quasi quae
27+
facere ipsum consequatur! Fugiat placeat quo nobis, quas illum
28+
deleniti qui dolorum modi numquam, vel unde officia nam temporibus
29+
ratione asperiores. Tempora nisi veritatis nulla vel unde ad neque
30+
explicabo quia quam minus! Totam corrupti ducimus recusandae natus,
31+
molestiae aspernatur sapiente. Iure dolorem repellat a perferendis
32+
mollitia ex provident, quis sapiente! Adipisci aspernatur ipsam
33+
laudantium minus. Iure atque debitis officia beatae ab eum?
34+
</p>
35+
<p class="text">
36+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem est
37+
odit eligendi corrupti, voluptate repudiandae quidem, veritatis fugit
38+
cum aliquam exercitationem quas! Suscipit iusto culpa quasi quae
39+
facere ipsum consequatur! Fugiat placeat quo nobis, quas illum
40+
deleniti qui dolorum modi numquam, vel unde officia nam temporibus
41+
ratione asperiores. Tempora nisi veritatis nulla vel unde ad neque
42+
explicabo quia quam minus! Totam corrupti ducimus recusandae natus,
43+
molestiae aspernatur sapiente. Iure dolorem repellat a perferendis
44+
mollitia ex provident, quis sapiente! Adipisci aspernatur ipsam
45+
laudantium minus. Iure atque debitis officia beatae ab eum?
46+
</p>
47+
<p class="text">
48+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem est
49+
odit eligendi corrupti, voluptate repudiandae quidem, veritatis fugit
50+
cum aliquam exercitationem quas! Suscipit iusto culpa quasi quae
51+
facere ipsum consequatur! Fugiat placeat quo nobis, quas illum
52+
deleniti qui dolorum modi numquam, vel unde officia nam temporibus
53+
ratione asperiores. Tempora nisi veritatis nulla vel unde ad neque
54+
explicabo quia quam minus! Totam corrupti ducimus recusandae natus,
55+
molestiae aspernatur sapiente. Iure dolorem repellat a perferendis
56+
mollitia ex provident, quis sapiente! Adipisci aspernatur ipsam
57+
laudantium minus. Iure atque debitis officia beatae ab eum?
58+
</p>
59+
<p class="text">
60+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem est
61+
odit eligendi corrupti, voluptate repudiandae quidem, veritatis fugit
62+
cum aliquam exercitationem quas! Suscipit iusto culpa quasi quae
63+
facere ipsum consequatur! Fugiat placeat quo nobis, quas illum
64+
deleniti qui dolorum modi numquam, vel unde officia nam temporibus
65+
ratione asperiores. Tempora nisi veritatis nulla vel unde ad neque
66+
explicabo quia quam minus! Totam corrupti ducimus recusandae natus,
67+
molestiae aspernatur sapiente. Iure dolorem repellat a perferendis
68+
mollitia ex provident, quis sapiente! Adipisci aspernatur ipsam
69+
laudantium minus. Iure atque debitis officia beatae ab eum?
70+
</p>
71+
<p class="text">
72+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem est
73+
odit eligendi corrupti, voluptate repudiandae quidem, veritatis fugit
74+
cum aliquam exercitationem quas! Suscipit iusto culpa quasi quae
75+
facere ipsum consequatur! Fugiat placeat quo nobis, quas illum
76+
deleniti qui dolorum modi numquam, vel unde officia nam temporibus
77+
ratione asperiores. Tempora nisi veritatis nulla vel unde ad neque
78+
explicabo quia quam minus! Totam corrupti ducimus recusandae natus,
79+
molestiae aspernatur sapiente. Iure dolorem repellat a perferendis
80+
mollitia ex provident, quis sapiente! Adipisci aspernatur ipsam
81+
laudantium minus. Iure atque debitis officia beatae ab eum?
82+
</p>
83+
<p class="text">
84+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem est
85+
odit eligendi corrupti, voluptate repudiandae quidem, veritatis fugit
86+
cum aliquam exercitationem quas! Suscipit iusto culpa quasi quae
87+
facere ipsum consequatur! Fugiat placeat quo nobis, quas illum
88+
deleniti qui dolorum modi numquam, vel unde officia nam temporibus
89+
ratione asperiores. Tempora nisi veritatis nulla vel unde ad neque
90+
explicabo quia quam minus! Totam corrupti ducimus recusandae natus,
91+
molestiae aspernatur sapiente. Iure dolorem repellat a perferendis
92+
mollitia ex provident, quis sapiente! Adipisci aspernatur ipsam
93+
laudantium minus. Iure atque debitis officia beatae ab eum?
94+
</p>
95+
<p class="text">
96+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem est
97+
odit eligendi corrupti, voluptate repudiandae quidem, veritatis fugit
98+
cum aliquam exercitationem quas! Suscipit iusto culpa quasi quae
99+
facere ipsum consequatur! Fugiat placeat quo nobis, quas illum
100+
deleniti qui dolorum modi numquam, vel unde officia nam temporibus
101+
ratione asperiores. Tempora nisi veritatis nulla vel unde ad neque
102+
explicabo quia quam minus! Totam corrupti ducimus recusandae natus,
103+
molestiae aspernatur sapiente. Iure dolorem repellat a perferendis
104+
mollitia ex provident, quis sapiente! Adipisci aspernatur ipsam
105+
laudantium minus. Iure atque debitis officia beatae ab eum?
106+
</p>
107+
</article>
108+
<footer>
109+
Coded by
110+
<a
111+
href="https://github.com/selimbiber"
112+
title="GitHub: selimbiber"
113+
target="_blank"
114+
>
115+
Selim Biber
116+
</a>
117+
<a
118+
href="https://github.com/selimbiber/Pure-JavaScript-Projects/"
119+
title="GitHub: Pure JavaScript Projects"
120+
><img id="github-logo" src="./images/github-icon.svg" alt=""
121+
/></a>
122+
</footer>
123+
</main>
124+
<script src="./main.js"></script>
125+
</body>
126+
</html>

‎StickyNavbar/main.js

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
const NAVBAR = document.getElementById('navbar')
2+
const HERO = document.getElementById('hero-section')
3+
4+
window.addEventListener('scroll', () => {
5+
if (window.pageYOffset >= HERO.offsetHeight) {
6+
NAVBAR.style.backgroundColor = 'black'
7+
} else {
8+
NAVBAR.style.backgroundColor = 'bisque'
9+
}
10+
});

‎StickyNavbar/styles.css

+139
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,139 @@
1+
/* RESET */
2+
#root, #__next {
3+
isolation: isolate;
4+
}
5+
6+
html {
7+
box-sizing: border-box;
8+
font-size: 62.5%;
9+
}
10+
11+
*,
12+
*::before,
13+
*::after {
14+
box-sizing: inherit;
15+
margin: 0;
16+
padding: 0;
17+
}
18+
19+
@media (prefers-reduced-motion: reduce) {
20+
*,
21+
*::before,
22+
*::after {
23+
animation-duration: 0.01ms !important;
24+
animation-iteration-count: 1 !important;
25+
transition-duration: 0.01ms !important;
26+
scroll-behavior: auto !important;
27+
}
28+
}
29+
30+
body {
31+
font-size: 1.6rem;
32+
min-height: 100vh;
33+
max-width: 100vw;
34+
scroll-behavior: smooth;
35+
text-rendering: optimizeSpeed;
36+
line-height: 1.5;
37+
display: flex;
38+
font-family: Arial, Helvetica, sans-serif;
39+
}
40+
41+
ul[class],
42+
ol[class],
43+
li {
44+
list-style: none;
45+
}
46+
/*****/
47+
48+
#container {
49+
display: flex;
50+
flex-direction: column;
51+
background-color: bisque;
52+
}
53+
54+
#navbar {
55+
display: flex;
56+
justify-content: space-between;
57+
align-items: center;
58+
margin-bottom: auto;
59+
height: 10vh;
60+
padding: 0 5rem;
61+
font-weight: bold;
62+
position: sticky;
63+
top: 0;
64+
z-index: 1;
65+
}
66+
67+
#navbar a {
68+
text-decoration: none;
69+
}
70+
71+
#navbar #homepage-link {
72+
font-size: 3rem;
73+
font-style: italic;
74+
font-family:monospace;
75+
color: orangered
76+
}
77+
78+
#navbar #other-links {
79+
font-size: 2rem;
80+
display: flex;
81+
gap: 2rem;
82+
}
83+
84+
#navbar #other-links a {
85+
color: orange;
86+
}
87+
88+
#hero-section {
89+
background-image: url(./images/keyboard-background.jpg);
90+
background-size: 100% 100vh;
91+
height: 90vh;
92+
width: 100%;
93+
position: relative;
94+
display: flex;
95+
justify-content: center;
96+
align-items: center;
97+
}
98+
99+
#hero-text {
100+
font-size: 7rem;
101+
font-style: italic;
102+
font-family:monospace;
103+
color: orangered;
104+
text-align: center;
105+
}
106+
107+
#article {
108+
padding: 5rem 5rem 3rem 5rem;
109+
display: flex;
110+
flex-direction: column;
111+
row-gap: 3rem;
112+
}
113+
114+
footer {
115+
margin-top: auto;
116+
text-align: center;
117+
width: 100%;
118+
color: black;
119+
font-size: 2rem;
120+
}
121+
122+
footer > a {
123+
color: black;
124+
font-weight: bold;
125+
text-decoration:none;
126+
}
127+
128+
#github-logo {
129+
display: inline;
130+
color: black;
131+
height: 2rem;
132+
width: 2rem;
133+
margin-left: .4rem;
134+
transition: transform 0.3s ease-in-out;
135+
}
136+
137+
#github-logo:hover {
138+
transform: rotate(360deg) scale(1.2);
139+
}

0 commit comments

Comments
 (0)