scroll header and more

wodydoc · Jul 11, 2023 · 871bbbb · 871bbbb
1 parent f29ab06
commit 871bbbb
Show file tree

Hide file tree

Showing 3 changed files with 62 additions and 51 deletions.
diff --git a/assets/css/styles.css b/assets/css/styles.css
@@ -4,14 +4,10 @@ body {
   width: 100%;
   margin: 0;
   padding: 0;
-  background-color: var(--body-color);
 }
 
 body {
-  padding-top: constant(safe-area-inset-top);
-  padding-top: env(safe-area-inset-top);
-  padding-bottom: constant(safe-area-inset-bottom);
-  padding-bottom: env(safe-area-inset-bottom);
+  padding: env(safe-area-inset-top) env(safe-area-inset-bottom);
 }
 
 /*=============== VARIABLES CSS ===============*/
@@ -278,9 +274,6 @@ the website, in dark theme
   background-color: var(--container-color);
 }
 
-.dark-theme .scroll-header {
-  box-shadow: 0 1px 4px hsla(var(--hue), 4%, 4%, 0.3);
-}
 
 /*=============== REUSABLE CSS CLASSES ===============*/
 .section {
@@ -424,11 +417,51 @@ tspan.cls-4 {
   right: 0;
 }
 
+/*=============== SCROLL UP ===============*/
+.scrollup {
+  position: fixed;
+  background-color: var(--first-color);
+  right: 1rem;
+  bottom: -30%;
+  display: inline-flex;
+  padding: 0.5rem;
+  border-radius: 0.25rem;
+  z-index: var(--z-tooltip);
+  opacity: 0;
+  transition: 0.4s;
+}
+
+.scrollup__icon {
+  font-size: 1rem;
+  color: #fff;
+}
+
+.scrollup:hover {
+  background-color: var(--first-color-alt);
+  opacity: 1;
+}
+
+/* Show Scroll Up*/
+.show-scroll {
+  bottom: 3rem;
+  opacity: 0.8;
+}
+
+/* Smooth Appearance Scroll Up*/
+.scroll-header {
+  opacity: 1;
+}
+
 /* Change background header */
 .scroll-header {
-  box-shadow: 0 1px 4px hsla(var(--hue), 4%, 15%, 0.1);
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
+}
+
+.dark-theme .scroll-header {
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
 }
 
+
 /* Active link */
 .active-link {
   position: relative;
@@ -444,6 +477,7 @@ tspan.cls-4 {
   height: 2px;
   background-color: var(--first-color);
 }
+
 /* All your variable and reusable styles should be placed before this. */
 
 /* HOME STYLES */
@@ -1637,35 +1671,6 @@ span.behavior {
   margin: 5rem 0 1rem;
 }
 
-/*=============== SCROLL UP ===============*/
-.scrollup {
-  position: fixed;
-  background-color: var(--first-color);
-  right: 1rem;
-  bottom: -30%;
-  display: inline-flex;
-  padding: 0.5rem;
-  border-radius: 0.25rem;
-  z-index: var(--z-tooltip);
-  opacity: 0.8;
-  transition: 0.4s;
-}
-
-.scrollup__icon {
-  font-size: 1rem;
-  color: #fff;
-}
-
-.scrollup:hover {
-  background-color: var(--first-color-alt);
-  opacity: 1;
-}
-
-/* Show Scroll Up*/
-.show-scroll {
-  bottom: 3rem;
-}
-
 /*=============== SCROLL BAR ===============*/
 ::-webkit-scrollbar {
   display: none;

diff --git a/assets/js/scroll.js b/assets/js/scroll.js
@@ -1,8 +1,13 @@
 /*=============== CHANGE BACKGROUND HEADER ===============*/
 function scrollHeader() {
   const header = document.getElementById("header");
-  if (this.scrollY >= 80) header.classList.add("scroll-header");
-  else header.classList.remove("scroll-header");
+  if (this.scrollY >= 80) {
+    header.classList.add("scroll-header");
+    header.style.backgroundColor = "var(--container-color)"; // Change the color to what you need
+  } else {
+    header.classList.remove("scroll-header");
+    header.style.backgroundColor = "transparent"; // Reset to initial color
+  }
 }
 window.addEventListener("scroll", scrollHeader);
 
@@ -14,17 +19,18 @@ function scrollActive() {
 
   sections.forEach((current) => {
     const sectionHeight = current.offsetHeight,
-      sectionTop = current.offsetTop - 58,
+      sectionTop = current.offsetTop - 50, // Increased offset to match the header height
       sectionId = current.getAttribute("id");
 
     if (scrollY > sectionTop && scrollY <= sectionTop + sectionHeight) {
       document
         .querySelector(".nav__menu a[href*=" + sectionId + "]")
         .classList.add("active-link");
     } else {
-      document
-        .querySelector(".nav__menu a[href*=" + sectionId + "]")
-        .classList.remove("active-link");
+      const activeLink = document.querySelector(
+        ".nav__menu a[href*=" + sectionId + "]"
+      );
+      if (activeLink) activeLink.classList.remove("active-link"); // Added null check
     }
   });
 }
@@ -33,7 +39,12 @@ window.addEventListener("scroll", scrollActive);
 /*=============== SHOW SCROLL UP ===============*/
 function scrollUp() {
   const scrollUp = document.getElementById("scroll-up");
-  if (this.scrollY >= 400) scrollUp.classList.add("show-scroll");
-  else scrollUp.classList.remove("show-scroll");
+  if (this.scrollY >= 560) {
+    scrollUp.classList.add("show-scroll");
+    scrollUp.classList.add("scroll-header");
+  } else {
+    scrollUp.classList.remove("show-scroll");
+    scrollUp.classList.remove("scroll-header");
+  }
 }
 window.addEventListener("scroll", scrollUp);
diff --git a/index.html b/index.html
@@ -80,11 +80,6 @@
     <link rel="stylesheet" href="assets/css/styles.css" />
 
     <title>Joey Schewee's WE Solutions</title>
-    <style>
-      body {
-        background-color: var(--body-color);
-      }
-    </style>
   </head>
   <body>
     <!--==================== HEADER ====================-->