Skip to content

Commit 76911ca

Browse files
chebreadchebread
committed
bug: Zoomed image (medium-zoom library) still flickers behind sticky nav on fast scroll
fix: Correct sticky navigation behavior on home, about page
1 parent 4b2dadd commit 76911ca

11 files changed

Lines changed: 241 additions & 152 deletions

File tree

‎content/about/about.md‎

Lines changed: 45 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,4 +3,48 @@ published: false
33
fixed: false
44
---
55

6-
반갑습니다. 개발자 차한음입니다.
6+
반갑습니다. 개발자 차한음입니다.
7+
8+
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos fuga sint consequatur saepe accusamus voluptatem ex laudantium exercitationem labore expedita, veniam omnis molestias quas veritatis! Numquam cupiditate dolore atque soluta.
9+
10+
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos fuga sint consequatur saepe accusamus voluptatem ex laudantium exercitationem labore expedita, veniam omnis molestias quas veritatis! Numquam cupiditate dolore atque soluta.
11+
12+
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos fuga sint consequatur saepe accusamus voluptatem ex laudantium exercitationem labore expedita, veniam omnis molestias quas veritatis! Numquam cupiditate dolore atque soluta.
13+
14+
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos fuga sint consequatur saepe accusamus voluptatem ex laudantium exercitationem labore expedita, veniam omnis molestias quas veritatis! Numquam cupiditate dolore atque soluta.
15+
16+
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos fuga sint consequatur saepe accusamus voluptatem ex laudantium exercitationem labore expedita, veniam omnis molestias quas veritatis! Numquam cupiditate dolore atque soluta.
17+
18+
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos fuga sint consequatur saepe accusamus voluptatem ex laudantium exercitationem labore expedita, veniam omnis molestias quas veritatis! Numquam cupiditate dolore atque soluta.
19+
20+
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos fuga sint consequatur saepe accusamus voluptatem ex laudantium exercitationem labore expedita, veniam omnis molestias quas veritatis! Numquam cupiditate dolore atque soluta.
21+
22+
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos fuga sint consequatur saepe accusamus voluptatem ex laudantium exercitationem labore expedita, veniam omnis molestias quas veritatis! Numquam cupiditate dolore atque soluta.
23+
24+
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos fuga sint consequatur saepe accusamus voluptatem ex laudantium exercitationem labore expedita, veniam omnis molestias quas veritatis! Numquam cupiditate dolore atque soluta.
25+
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos fuga sint consequatur saepe accusamus voluptatem ex laudantium exercitationem labore expedita, veniam omnis molestias quas veritatis! Numquam cupiditate dolore atque soluta.
26+
27+
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos fuga sint consequatur saepe accusamus voluptatem ex laudantium exercitationem labore expedita, veniam omnis molestias quas veritatis! Numquam cupiditate dolore atque soluta.
28+
29+
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos fuga sint consequatur saepe accusamus voluptatem ex laudantium exercitationem labore expedita, veniam omnis molestias quas veritatis! Numquam cupiditate dolore atque soluta.
30+
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos fuga sint consequatur saepe accusamus voluptatem ex laudantium exercitationem labore expedita, veniam omnis molestias quas veritatis! Numquam cupiditate dolore atque soluta.
31+
32+
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos fuga sint consequatur saepe accusamus voluptatem ex laudantium exercitationem labore expedita, veniam omnis molestias quas veritatis! Numquam cupiditate dolore atque soluta.
33+
34+
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos fuga sint consequatur saepe accusamus voluptatem ex laudantium exercitationem labore expedita, veniam omnis molestias quas veritatis! Numquam cupiditate dolore atque soluta.
35+
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos fuga sint consequatur saepe accusamus voluptatem ex laudantium exercitationem labore expedita, veniam omnis molestias quas veritatis! Numquam cupiditate dolore atque soluta.
36+
37+
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos fuga sint consequatur saepe accusamus voluptatem ex laudantium exercitationem labore expedita, veniam omnis molestias quas veritatis! Numquam cupiditate dolore atque soluta.
38+
39+
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos fuga sint consequatur saepe accusamus voluptatem ex laudantium exercitationem labore expedita, veniam omnis molestias quas veritatis! Numquam cupiditate dolore atque soluta.
40+
41+
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos fuga sint consequatur saepe accusamus voluptatem ex laudantium exercitationem labore expedita, veniam omnis molestias quas veritatis! Numquam cupiditate dolore atque soluta.
42+
43+
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos fuga sint consequatur saepe accusamus voluptatem ex laudantium exercitationem labore expedita, veniam omnis molestias quas veritatis! Numquam cupiditate dolore atque soluta.
44+
45+
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos fuga sint consequatur saepe accusamus voluptatem ex laudantium exercitationem labore expedita, veniam omnis molestias quas veritatis! Numquam cupiditate dolore atque soluta.
46+
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos fuga sint consequatur saepe accusamus voluptatem ex laudantium exercitationem labore expedita, veniam omnis molestias quas veritatis! Numquam cupiditate dolore atque soluta.
47+
48+
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos fuga sint consequatur saepe accusamus voluptatem ex laudantium exercitationem labore expedita, veniam omnis molestias quas veritatis! Numquam cupiditate dolore atque soluta.
49+
50+
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos fuga sint consequatur saepe accusamus voluptatem ex laudantium exercitationem labore expedita, veniam omnis molestias quas veritatis! Numquam cupiditate dolore atque soluta.

‎content/home/home.md‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,4 +3,13 @@ published: false
33
fixed: false
44
---
55

6-
반갑습니다. 개발자 차한음입니다.
6+
반갑습니다. 개발자 차한음입니다.
7+
8+
![profile](/assets/profile.png)
9+
![profile](/assets/profile.png)
10+
![profile](/assets/profile.png)
11+
![profile](/assets/profile.png)
12+
![profile](/assets/profile.png)
13+
![profile](/assets/profile.png)
14+
![profile](/assets/profile.png)
15+
![profile](/assets/profile.png)

‎layout/about.html‎

Lines changed: 12 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -51,18 +51,19 @@
5151
<body>
5252
<div class="root">
5353
<div class="about">
54+
<nav class="about-nav">
55+
<a href="/" class="{{if eq .CurrentURL "/"}}active{{end}}">
56+
<span>홈</span>
57+
</a>
58+
<a href="/about.html" class="{{if eq .CurrentURL "/about.html"}}active{{end}}">
59+
<span>어바웃</span>
60+
</a>
61+
<a href="/posts.html" class="{{if eq .CurrentURL "/posts.html"}}active{{end}}">
62+
<span>포스트</span>
63+
</a>
64+
</nav>
65+
5466
<header class="about-header">
55-
<nav class="about-nav">
56-
<a href="/" class="{{if eq .CurrentURL "/"}}active{{end}}">
57-
<span>홈</span>
58-
</a>
59-
<a href="/about.html" class="{{if eq .CurrentURL "/about.html"}}active{{end}}">
60-
<span>어바웃</span>
61-
</a>
62-
<a href="/posts.html" class="{{if eq .CurrentURL "/posts.html"}}active{{end}}">
63-
<span>포스트</span>
64-
</a>
65-
</nav>
6667
<div class="about-hero">
6768
<h1>개발자 차한음</h1>
6869
</div>

‎layout/index.html‎

Lines changed: 13 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -51,22 +51,24 @@
5151
<body>
5252
<div class="root">
5353
<div class="home">
54+
<nav class="home-nav">
55+
<a href="/" class="{{if eq .CurrentURL "/"}}active{{end}}">
56+
<span>홈</span>
57+
</a>
58+
<a href="/about.html" class="{{if eq .CurrentURL "/about.html"}}active{{end}}">
59+
<span>어바웃</span>
60+
</a>
61+
<a href="/posts.html" class="{{if eq .CurrentURL "/posts.html"}}active{{end}}">
62+
<span>포스트</span>
63+
</a>
64+
</nav>
65+
5466
<header class="home-header">
55-
<nav class="home-nav">
56-
<a href="/" class="{{if eq .CurrentURL "/"}}active{{end}}">
57-
<span>홈</span>
58-
</a>
59-
<a href="/about.html" class="{{if eq .CurrentURL "/about.html"}}active{{end}}">
60-
<span>어바웃</span>
61-
</a>
62-
<a href="/posts.html" class="{{if eq .CurrentURL "/posts.html"}}active{{end}}">
63-
<span>포스트</span>
64-
</a>
65-
</nav>
6667
<div class="home-hero">
6768
<h1>차한음 블로그</h1>
6869
</div>
6970
</header>
71+
7072
<main class="home-content">
7173
<article class="markdown-body">
7274
{{- .Content -}}

‎layout/js/main.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
import mediumZoom from 'medium-zoom';
2+
13
function initializeStickyNav() {
24
const navs = document.querySelectorAll('.home-nav, .about-nav');
35

@@ -17,4 +19,6 @@ function initializeStickyNav() {
1719

1820
document.addEventListener('DOMContentLoaded', () => {
1921
initializeStickyNav();
22+
23+
mediumZoom('.markdown-body img');
2024
});

‎layout/styles/about.scss‎

Lines changed: 61 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -1,72 +1,75 @@
1-
.about-header {
2-
background-image:
3-
linear-gradient(to bottom, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.5)),
4-
url('/assets/profile.webp'),
5-
url('/assets/profile.png');
6-
background-size: cover;
7-
background-position: center;
8-
9-
.about-nav {
10-
position: sticky;
11-
top: 0;
12-
z-index: 10;
13-
transition: background-color 0.3s ease;
1+
.about-nav {
2+
position: fixed;
3+
top: 0;
4+
left: 0;
5+
right: 0;
6+
max-width: 35rem;
7+
margin: 0 auto;
8+
9+
z-index: 10;
10+
transition: background-color 0.3s ease;
11+
12+
&.scrolled {
13+
// transition: background-color 0.3s ease;
14+
background-color: white;
1415

15-
&.scrolled {
16-
// transition: background-color 0.3s ease;
17-
background-color: white;
18-
19-
a {
20-
span {
21-
color: black;
22-
}
23-
24-
&::after {
25-
background-color: black;
26-
}
27-
}
28-
}
29-
30-
display: flex;
31-
height: 4rem;
32-
flex-direction: row;
33-
3416
a {
35-
position: relative;
36-
flex: 1;
37-
display: flex;
38-
justify-content: center;
39-
align-items: center;
40-
4117
span {
42-
font-size: 1rem;
43-
line-height: 1.5;
44-
font-weight: 900;
45-
color: var(--neutral-100);
18+
color: black;
4619
}
47-
4820
&::after {
49-
content: '';
50-
position: absolute;
51-
bottom: 0.5rem;
52-
height: 1.5px;
53-
background-color: var(--neutral-100);
54-
width: 50%;
55-
left: 50%;
56-
transform: translateX(-50%) scaleX(0);
57-
transform-origin: center;
21+
background-color: black;
5822
}
59-
&.active::after {
60-
transform: translateX(-50%) scaleX(1);
61-
}
62-
6323
}
6424
}
25+
display: flex;
26+
height: 4rem;
27+
flex-direction: row;
28+
a {
29+
position: relative;
30+
flex: 1;
31+
display: flex;
32+
justify-content: center;
33+
align-items: center;
34+
span {
35+
font-size: 1rem;
36+
line-height: 1.5;
37+
font-weight: 900;
38+
color: var(--neutral-100);
39+
}
40+
&::after {
41+
content: '';
42+
position: absolute;
43+
bottom: 0.5rem;
44+
height: 1.5px;
45+
background-color: var(--neutral-100);
46+
width: 50%;
47+
left: 50%;
48+
transform: translateX(-50%) scaleX(0);
49+
transform-origin: center;
50+
}
51+
&.active::after {
52+
transform: translateX(-50%) scaleX(1);
53+
}
54+
}
55+
}
56+
57+
.about-header {
58+
background-image:
59+
linear-gradient(to bottom, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.5)),
60+
url('/assets/profile.webp'),
61+
url('/assets/profile.png');
62+
background-size: cover;
63+
background-position: center;
64+
65+
// 기존에는 header 자체에 이미지를 보여주고 있음.
66+
// header hieght는 nav + hero인 17.5 + 4임.
67+
// 그니까 Nav를 분리시키면, header height는 17.5로 작아짐.
6568

6669
.about-hero {
67-
height: 17.5rem;
70+
height: 21.5rem;
6871
@media (max-width: 35rem) {
69-
height: 15rem;
72+
height: 19.5rem;
7073
}
7174

7275
display: flex;

0 commit comments

Comments
 (0)