refactor: better header scroll handling

index.html

@@ -24,9 +24,9 @@
             </div>
         </div>
     </header>
-    <div class="container h-screen" id="section_landing">
+    <div class="container px-2 2xl:h-screen" id="section_landing">
-        <div class="text-white h-full max-h-[60vh] relative">
+        <div class="text-white h-full xl:max-h-[40vh] 2xl:max-h-[60vh] relative">
-            <div class="bg-bg-pink w-full h-full max-h-[60vh] max-w-[46.25%] absolute top-0 right-0 -z-10"></div>
+            <div class="bg-bg-pink w-full h-full xl:max-h-[40vh] 2xl:max-h-[60vh] max-w-[46.25%] absolute top-0 right-0 -z-10"></div>
             <div class="flex items-center justify-center gap-12 px-8 py-8">
                 <img src="./static/avatar_512.png" alt="" class="w-[256px] lg:w-[372px] 2xl:w-[512px]" />
                 <div>
@@ -56,10 +56,10 @@
                             href="https://last.fm/user/radiquum" id="track-name" target="_blank" referrerpolicy="origin">"LOADING . . ."</a></p>
                 </div>
             </div>
-            <div class="flex items-end justify-end w-full max-w-[45%] gap-4 p-8 font-medium text-4xl mb-[3%]">
+            <div class="flex items-end justify-end w-full max-w-[45%] gap-4 p-8 font-medium text-4xl mb-[3%] flex-col 2xl:flex-row">
                 <a class="border-black border-4 hover:translate-x-2 hover:-translate-y-2 shadow-transparent hover:shadow-md hover:shadow-black transition-all border-t-8 border-l-8 border-solid w-[320px] h-[75px] flex items-end justify-end pr-2 pb-2 bg-bg-blue"
                     href="#section_about">ABOUT ME</a>
-                <a class="border-black border-4 hover:translate-x-2 hover:-translate-y-2 shadow-transparent hover:shadow-md hover:shadow-black transition-all border-t-8 border-l-8 border-solid w-[300px] h-[75px] flex items-end justify-end pr-2 pb-2 bg-bg-blue"
+                <a class="border-black border-4 hover:translate-x-2 hover:-translate-y-2 shadow-transparent hover:shadow-md hover:shadow-black transition-all border-t-8 border-l-8 border-solid w-[320px] 2xl:w-[300px] h-[75px] flex items-end justify-end pr-2 pb-2 bg-bg-blue"
                     href="#section_links">LINKS</a>
             </div>
         </div>

static/script.js

@@ -7,8 +7,8 @@ const IMAGE_ANIMATION_DELAY = 1000;
 const IMAGE_TRANSITION_DELAY = 1000;
 
 // Header percentages
-const HEADER_ACTIVATION_PERCENT = 30;
+const HEADER_ACTIVATION_PERCENT = 0.4;
-const HEADER_DEACTIVATION_PERCENT = 20;
+const HEADER_DEACTIVATION_PERCENT = 0.8;
 
 // THIS IS NOT CONSTANTS, BUT A GLOBAL VAR FOR TIMERS IN SONG NAME CHANGE!!!
 let DELETE_INTERVAL = null;
@@ -95,36 +95,24 @@ async function updatePlayingTrack() {
     });
 }
 
-function getBlockScrollPosition(block_id) {
-  const blockHeight = document.getElementById(block_id).clientHeight;
-  const fullPageHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight;
-  const restPageHeight = fullPageHeight - blockHeight;
-  const windowScroll = document.documentElement.scrollTop - restPageHeight;
-  const scrolled = (windowScroll / fullPageHeight) * 100;
-  if (0 < Math.floor(scrolled) ) {
-    return 0
-  } else {
-    return Math.floor(scrolled) * -1;
-  }
-}
-
 const header = document.getElementById("header");
 let last_Y_pos = 0;
 let header_opacity = 0;
 
 window.onscroll = () => {
-  let scrollPosition = getBlockScrollPosition('section_landing');
+  let landingBlock = document.getElementById("section_landing").clientHeight;
-  if (scrollPosition > HEADER_ACTIVATION_PERCENT) {
+
+  if (window.scrollY < (landingBlock * HEADER_ACTIVATION_PERCENT)) {
     header.style.display = "none";
   } else {
     header.style.display = "block";
   }
 
-  if (window.scrollY > last_Y_pos && scrollPosition < HEADER_ACTIVATION_PERCENT) {
+  if (window.scrollY > last_Y_pos && window.scrollY > (landingBlock * HEADER_ACTIVATION_PERCENT)) {
     header_opacity += 0.1;
-  } else if (window.scrollY < last_Y_pos && scrollPosition > HEADER_DEACTIVATION_PERCENT)
+  } else if (window.scrollY < last_Y_pos && window.scrollY < (landingBlock * HEADER_DEACTIVATION_PERCENT)) {
     header_opacity -= 0.1;
-  last_Y_pos = window.scrollY;
+  }
 
   if (header_opacity > 1) {
     header_opacity = 1;
@@ -132,6 +120,8 @@ window.onscroll = () => {
     header_opacity = 0;
   }
 
+  last_Y_pos = window.scrollY;
+
   header.style.setProperty("--header-opacity", `${header_opacity.toFixed(2)}`);
 };
 

static/tailwind.css

@@ -1239,6 +1239,14 @@ body {
     margin-top: -248px;
   }
 
+  .xl\:max-h-\[30vh\] {
+    max-height: 30vh;
+  }
+
+  .xl\:max-h-\[40vh\] {
+    max-height: 40vh;
+  }
+
   .xl\:gap-4 {
     gap: 1rem;
   }
@@ -1289,6 +1297,14 @@ body {
     margin-top: -0px;
   }
 
+  .\32xl\:h-screen {
+    height: 100vh;
+  }
+
+  .\32xl\:max-h-\[60vh\] {
+    max-height: 60vh;
+  }
+
   .\32xl\:w-\[512px\] {
     width: 512px;
   }
@@ -1297,6 +1313,14 @@ body {
     width: 64px;
   }
 
+  .\32xl\:w-\[300px\] {
+    width: 300px;
+  }
+
+  .\32xl\:flex-row {
+    flex-direction: row;
+  }
+
   .\32xl\:text-4xl {
     font-size: 2.25rem;
     line-height: 2.5rem;