refactor: Reimplement position: fixed as position: sticky, to solve the awkward behavior of header elements sticking to the top when you pull down hard in iOS Safari,

Author: chebread

layout/about.html

@@ -68,6 +68,7 @@
                     <h1>개발자 차한음</h1>
                 </div>
             </header>
+            
             <main class="about-content">
                 <article class="markdown-body">
                     {{ .Content }}

layout/styles/about.scss

@@ -1,16 +1,13 @@
 .about-nav {
-    position: fixed;
+    position: sticky;
     top: 0;
-    left: 0;
-    right: 0;
     max-width: 35rem;
     margin: 0 auto;
-    
     z-index: 10;
+
     transition: background-color 0.3s ease;
 
     &.scrolled {
-        // transition: background-color 0.3s ease;
         background-color: white;
 
         a {
@@ -55,37 +52,35 @@
 }
 
 .about-header {
+    margin-top: -4rem;
+}
+
+.about-hero {
     background-image:
         linear-gradient(to bottom, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.5)),
         url('/assets/profile.webp'),
         url('/assets/profile.png');   
     background-size: cover;
     background-position: center;
 
-    // 기존에는 header 자체에 이미지를 보여주고 있음.
-    // header hieght는 nav + hero인 17.5 + 4임.
-    // 그니까 Nav를 분리시키면, header height는 17.5로 작아짐.
+    height: 21.5rem;
+    @media (max-width: 35rem) {
+        height: 19.5rem;
+    }
 
-    .about-hero {
-        height: 21.5rem;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
+    
+    h1 {
+        font-size: 2rem;
+        line-height: 1.5;
+        font-weight: 800;
+        padding: 1rem;
         @media (max-width: 35rem) {
-            height: 19.5rem;
-        }
-
-        display: flex;
-        flex-direction: column;
-        justify-content: flex-end;
-
-        h1 {
-            font-size: 2rem;
-            line-height: 1.5;
-            font-weight: 800;
-            padding: 1rem;
-            @media (max-width: 35rem) {
-                padding: 1rem 1.3rem 1rem 1.3rem;
-            }
-            color: var(--neutral-100);
+            padding: 1rem 1.3rem 1rem 1.3rem;
         }
+        color: var(--neutral-100);
     }
 }
 

layout/styles/home.scss

@@ -1,13 +1,14 @@
+// 기존에는 header 자체에 이미지를 보여주고 있음.
+// header hieght는 nav + hero인 17.5 + 4임.
+// 그니까 Nav를 분리시키면, header height는 17.5로 작아짐.
+
 .home-nav {
-    position: fixed;
+    position: sticky;
     top: 0;
-    left: 0;
-    right: 0;
     max-width: 35rem;
     margin: 0 auto;
-
     z-index: 10;
-    
+
     transition: background-color 0.3s ease;
     /*
         스크롤 내릴 때: transparent → white로 배경색이 변합니다. 이 전환은 부드럽고 보기 좋습니다.
@@ -66,33 +67,33 @@
 }
 
 .home-header {
+    margin-top: -4rem;
+}
+
+.home-hero {
     background-image:
         linear-gradient(to bottom, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.5)),
         url('/assets/profile.webp'),
         url('/assets/profile.png');   
     background-size: cover;
     background-position: center;
 
-    .home-hero {
-        height: 21.5rem;
+    height: 21.5rem;
+    @media (max-width: 35rem) {
+        height: 19.5rem;
+    }
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
+    h1 {
+        font-size: 2rem;
+        line-height: 1.5;
+        font-weight: 800;
+        padding: 1rem;
         @media (max-width: 35rem) {
-            height: 19.5rem;
-        }
-
-        display: flex;
-        flex-direction: column;
-        justify-content: flex-end;
-
-        h1 {
-            font-size: 2rem;
-            line-height: 1.5;
-            font-weight: 800;
-            padding: 1rem;
-            @media (max-width: 35rem) {
-                padding: 1rem 1.3rem 1rem 1.3rem;
-            }
-            color: var(--neutral-100);
+            padding: 1rem 1.3rem 1rem 1.3rem;
         }
+        color: var(--neutral-100);
     }
 }