Merge branch 'main' into sticky

quiellll · web-flow · commit 9681e71241ac · 2024-12-15T12:33:27.000+01:00
diff --git a/css/style.css b/css/style.css
@@ -32,6 +32,8 @@ body {
     overflow-x: hidden;
 }
 
+/* html, body { overflow-x: hidden; } */
+
 /* Scrollable container */
 .container {
     max-width: 1320px;
@@ -52,6 +54,7 @@ body {
     background-attachment: scroll;
     padding: 5%;
     margin-top: auto;
+    margin-bottom: 0;
     filter: drop-shadow(0.1vw 0.1vw 0.1vw var(--bs-dark));
 }
 
@@ -157,6 +160,7 @@ body {
     color: var(--bs-light);
     padding: 0;
     margin-bottom: 3rem;
+    min-width: 100%;    
 }
 
 .hero-section .about-img img {
@@ -172,23 +176,32 @@ body {
     padding: 2rem 0;
     margin-bottom: 0;
     z-index: 1020;
+    padding: 2rem;
+    margin: 0;
+    z-index: 1020;
+    width: 100%;
+    
+}
+
+.section-header .container {
+    position: relative;
 }
 
 .section-header h2 {
     color: var(--bs-white);
     margin: 0;
     font-size: 2.25rem;
     font-family: "Special Elite", system-ui;
+    
 }
 
 .section-header::before {
     content: "";
     position: absolute;
+    inset: 0;
     width: 100vw;
-    height: 100%;
-    top: 0;
+    margin-left: -50vw;
     left: 50%;
-    transform: translateX(-50%);
     background: var(--bs-dark);
     z-index: -1;
 }
@@ -197,7 +210,16 @@ body {
 section {
     position: relative;
     min-height: auto;
-    margin-bottom: 0;
+}
+
+.section-header.is-sticky {
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+}
+
+/*** Sections ***/
+section {
+    position: relative;
+    margin: 0;
 }
 
 .section-content {
@@ -713,7 +735,7 @@ section {
         background: var(--bs-dark);
         padding: 1rem;
         margin-top: 0.5rem;
-        max-height: cañc(100vh - 70px);
+        max-height: calc(100vh - 70px);
         overflow-y: auto;
     }
 
diff --git a/index.html b/index.html
@@ -42,7 +42,7 @@
 
   <body>
     <!-- Navbar -->
-    <nav class="navbar navbar-expand-lg navbar-dark">
+    <nav class="navbar navbar-expand-lg navbar-dark" data-bs-spy="scroll" data-bs-target="#navbarNav" data-bs-root-margin="0px 0px -40%" data-bs-smooth-scroll="true">
       <div class="container-fluid">
         <div class="container position-relative">
           <div class="d-flex justify-content-between align-items-center w-100">
diff --git a/js/main.js b/js/main.js
@@ -35,28 +35,34 @@
     return false;
   });
 
+
   // Simple navbar scroll spy
   document.addEventListener("DOMContentLoaded", function () {
-    var scrollSpy = new bootstrap.ScrollSpy(document.body, {
-      target: "#navbarNav",
-      offset: 100,
+    const dataSpyList = document.querySelectorAll('[data-bs-spy="scroll"]');
+    dataSpyList.forEach((dataSpyEl) => {
+      bootstrap.ScrollSpy.getOrCreateInstance(dataSpyEl, {
+        target: "#navbarNav",
+        offset: 100,
+        smoothScroll: true,
+      });
     });
 
     document.querySelectorAll(".navbar-nav a.nav-link").forEach((link) => {
       link.addEventListener("click", function (e) {
         if (this.hash !== "") {
           e.preventDefault();
           const hash = this.hash;
-
           document.querySelector(hash).scrollIntoView({
             behavior: "smooth",
           });
 
-          // Close mobile menu after clicking
+          // En móvil cerrar tras pulsar un enlace
+
           const navbarToggle = document.querySelector(".navbar-toggler");
           if (window.getComputedStyle(navbarToggle).display !== "none") {
             document.querySelector(".navbar-collapse").classList.remove("show");
           }
+
         }
       });
     });
@@ -100,6 +106,7 @@
     // Observe each section
     document.querySelectorAll("section").forEach((section) => {
       observer.observe(section);
+
     });
   });
 })(jQuery);
