Update index.html

index.html

@@ -26,12 +26,14 @@
 }
 
 header {
-  background: linear-gradient(90deg, #4a90e2, #007aff);
-  color: #fff;
-  padding: 40px 0;
-  text-align: center;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
-  transition: height 0.3s ease; /* Add transition for header height */
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+}
+
+      main {
+  padding-top: 70px; /* Ganti dengan tinggi header Anda */
 }
 
 header h1 {
@@ -460,21 +462,18 @@ themeSwitch.addEventListener('change', () => {
             });
         }
 
-window.onscroll = function() {scrollFunction()};
+window.addEventListener('scroll', function() {
+  var scrollPosition = window.scrollY || document.documentElement.scrollTop;
+  var headerText = document.querySelector('header h1');
 
-function scrollFunction() {
-  if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {
-    document.querySelector("header").style.padding = "10px 0"; // Menyusut menjadi setengah
-    document.querySelector("header").style.minHeight = "50px"; // Menetapkan tinggi minimum
-    document.querySelector("header h1").style.fontSize = "1em"; // Menyusut lebih lanjut
-    document.querySelector("header h1").style.textAlign = "left"; // Teks berpindah ke kiri
+  if (scrollPosition <= 50) {
+    // Jika posisi scroll kurang dari atau sama dengan 50
+    headerText.style.fontSize = '2.5em'; // Ukuran font awal
   } else {
-    document.querySelector("header").style.padding = "40px 0";
-    document.querySelector("header").style.minHeight = "0"; // Menghapus tinggi minimum
-    document.querySelector("header h1").style.fontSize = "2.5em";
-    document.querySelector("header h1").style.textAlign = "center";
+    // Jika posisi scroll lebih dari 50
+    headerText.style.fontSize = '1.25em'; // Ukuran font menyusut
   }
-}
+});
 
       
     </script>