Witam wszystkich, jetem początkującym\ uczącym się programowania.
Pomyślałem, ze może wypadałoby stworzyć własne portfolio i w tym celu przeglądałem internet w poszukiwaniu inspiracji.
Znalazłem bardzo fajnie zrobione portfolio. brittanychiang.com i na tej stronie lewa polowa jest nie ruchoma a tylko prawa jest scrollowalna. No i chodzi mi właśnie o ten zabieg. Jak to jest zrobione? Czy mógłby mi to ktoś wytłumaczyć, pokazać jak to zrobić?
Z gory bardzo dziękuję za pomoc i mam nadzieje, ze zabawie tu na dłużej :)
0
1
Szukaj pod hasłem fixed sidebar.
0
W życiu nie widziałem żeby portfolio komuś pomogło znaleźć pracę. Jeśli już to znajomości więc polecam tu marnować swój czas a nie portfolio.
1
Saalin napisał(a):
Szukaj pod hasłem fixed sidebar.
+ np. Observer [ Intersection observer ]
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fixed sidebar + Observer</title>
<style>
html,
body {
scroll-behavior: smooth;
}
body {
margin: 0;
font-family: Arial, sans-serif;
display: flex;
}
nav {
position: fixed;
top: 0;
left: 0;
height: 100vh;
width: 200px;
background: hsla(0, 0%, 20%, 0.95); /* #333 */
display: flex;
flex-direction: column;
justify-content: center;
z-index: 9999;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
}
nav ul li {
margin: 0;
}
nav ul li a {
display: block;
padding: 1rem;
color: white;
text-decoration: none;
transition: color 0.3s ease, font-weight 0.3s ease;
}
nav ul li a.active {
color: hsla(155, 100%, 70%, 0.95); /* #64ffda (Aquamarine) */
font-weight: bold;
}
main {
margin-left: 200px;
width: calc(100% - 200px);
}
section {
height: 100vh; /* dla demonstracji każda sekcja zajmuje 100% wysokości okna */
display: flex;
justify-content: center;
align-items: center;
font-size: 2rem;
background: hsla(0, 0%, 96%, 0.95); /* #f4f4f4 */
}
section:nth-child(odd) {
background: hsla(0, 0%, 89%, 1); /* #e4e4e4 */
}
</style>
</head>
<body>
<nav id="menu">
<ul>
<li><a href="#section1">Section 1</a></li>
<li><a href="#section2">Section 2</a></li>
<li><a href="#section3">Section 3</a></li>
<li><a href="#section4">Section 4</a></li>
</ul>
</nav>
<main>
<section id="section1">Section 1</section>
<section id="section2">Section 2</section>
<section id="section3">Section 3</section>
<section id="section4">Section 4</section>
</main>
<script>
const sections = document.querySelectorAll('section');
const nav_links = document.querySelectorAll('nav#menu a');
// Tworzymy Intersection Observer
const observer = new IntersectionObserver(
(entries) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
// Usuwamy klasę 'active' ze wszystkich linków
nav_links.forEach((link) => link.classList.remove('active'));
// Dodajemy klasę 'active' do aktualnie widocznej sekcji
const active_link = document.querySelector(`nav#menu a[href="#${entry.target.id}"]`);
if (active_link) active_link.classList.add('active');
}
});
},
{ threshold: 0.5 } // Sekcja jest aktywna, gdy co najmniej 50% jej wysokości jest widoczne
);
// Obserwujemy każdą sekcję
sections.forEach((section) => observer.observe(section));
</script>
</body>
</html>