From a893caba965cc14b60663b2b83f833f3c0ced53c Mon Sep 17 00:00:00 2001
From: littleblack111 <littleblack11111@gmail.com>
Date: Thu, 14 Mar 2024 19:19:36 +0800
Subject: dynamic island/header added minimization after scroll down

---
 src/css/style.css | 25 +++++++++++++++++++++++--
 src/js/header.js  |  5 +++++
 2 files changed, 28 insertions(+), 2 deletions(-)

(limited to 'src')

diff --git a/src/css/style.css b/src/css/style.css
index 976678fe..b39214c6 100644
--- a/src/css/style.css
+++ b/src/css/style.css
@@ -205,6 +205,17 @@ body::-webkit-scrollbar {
     }
 }
 
+@keyframes minimize {
+    from {
+        scale: 1;
+        opacity: 1;
+    }
+    to {
+        scale: 0;
+        opacity: 0;
+    }
+}
+
 
 /* animation: name duration timing-function delay iteration-count direction fill-mode; */
 
@@ -331,6 +342,7 @@ body::-webkit-scrollbar {
 /* topbar styles ========================================== */
 
 header {
+    overflow: hidden;
     position: fixed;
     top: 2rem;
     left: 0;
@@ -345,7 +357,7 @@ header {
     /* background: rgba(0, 0, 0, 0.2); */
     background-color: #000;
     border-radius: 32px;
-    transition: all 0.3s;
+    transition: all 0.1s;
 }
 
 .navBar a {
@@ -370,7 +382,7 @@ header {
 
 .navBar a::after {
     content: '';
-    position: absolute;
+    position: fixed;
     left: 0;
     bottom: 0;
     width: 100%;
@@ -434,6 +446,15 @@ header,
     transition: all 0.5s
 }
 
+header.minimizedIsland {
+    opacity: 0;
+    scale: 0;
+    -webkit-animation-name: minimizeIsland;
+    animation-name: minimizeIsland;
+    animation-fill-mode: forwards;
+    transition: all 0.3s
+}
+
 /* other ================================================== */
 
 .contents {
diff --git a/src/js/header.js b/src/js/header.js
index c04a0f6d..e6c32068 100644
--- a/src/js/header.js
+++ b/src/js/header.js
@@ -19,3 +19,8 @@ mainHeader.innerHTML = `
 
 header.appendChild(mainHeader);
 document.getElementById("btn"+page).setAttribute('class', 'active');
+
+window.onscroll = event => {
+let header = document.querySelector('header');
+	header.classList.toggle("minimizedIsland", window.scrollY > 100)
+}
\ No newline at end of file
-- 
cgit v1.2.3