Feat/scroll header

* feat: add scroll header * feat: settings scroll * fix: fix margin
RezenkovD · Aug 10, 2023 · 4939c94 · 4939c94
1 parent b86253d
commit 4939c94
Show file tree

Hide file tree

Showing 5 changed files with 54 additions and 25 deletions.
diff --git a/users/templates/base/base.html b/users/templates/base/base.html
@@ -123,7 +123,7 @@
         </div>
     </header>
     {% block intro_bg_block %}{% endblock %}
-    <section class="not-head">
+    <section class="not-head" style="margin-top: 48px">
         {% block main %}{% endblock %}
         <footer>
             <div class="footer-container">

diff --git a/users/templates/js/base.js b/users/templates/js/base.js
@@ -10,21 +10,20 @@ document.addEventListener("DOMContentLoaded", function () {
             if (menuUL.style.maxHeight) {
                 menuUL.style.maxHeight = null;
                 btnToggle_.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M4.66683 6.66675C4.31321 6.66675 3.97407 6.80722 3.72402 7.05727C3.47397 7.30732 3.3335 7.64646 3.3335 8.00008C3.3335 8.3537 3.47397 8.69284 3.72402 8.94289C3.97407 9.19294 4.31321 9.33341 4.66683 9.33341L27.3335 9.33342C27.6871 9.33342 28.0263 9.19294 28.2763 8.94289C28.5264 8.69284 28.6668 8.3537 28.6668 8.00008C28.6668 7.64646 28.5264 7.30732 28.2763 7.05727C28.0263 6.80722 27.6871 6.66675 27.3335 6.66675L4.66683 6.66675ZM3.3335 16.0001C3.3335 15.6465 3.47397 15.3073 3.72402 15.0573C3.97407 14.8072 4.31321 14.6667 4.66683 14.6667L27.3335 14.6667C27.6871 14.6667 28.0263 14.8072 28.2763 15.0573C28.5264 15.3073 28.6668 15.6465 28.6668 16.0001C28.6668 16.3537 28.5264 16.6928 28.2763 16.9429C28.0263 17.1929 27.6871 17.3334 27.3335 17.3334L4.66683 17.3334C4.31321 17.3334 3.97407 17.1929 3.72402 16.9429C3.47397 16.6928 3.3335 16.3537 3.3335 16.0001ZM3.3335 24.0014C3.3335 23.6478 3.47397 23.3087 3.72402 23.0586C3.97407 22.8086 4.31321 22.6681 4.66683 22.6681L27.3335 22.6681C27.6871 22.6681 28.0263 22.8086 28.2763 23.0586C28.5264 23.3087 28.6668 23.6478 28.6668 24.0014C28.6668 24.355 28.5264 24.6942 28.2763 24.9442C28.0263 25.1943 27.6871 25.3347 27.3335 25.3347L4.66683 25.3347C4.31321 25.3347 3.97407 25.1943 3.72402 24.9442C3.47397 24.6942 3.3335 24.355 3.3335 24.0014Z" fill="#FCFCFC" /></svg>'
-                headerA.style.height = "32px";
                 headerA.style.position = ""
-                headerA.style.background = ""
-                headerA.style.height = ""
-                headerA.style.width = ""
+                var scrollPosition = window.scrollY;
+                if (scrollPosition > 0) {
+                    headerA.style.backgroundColor = "rgba(2, 2, 4, 0.70)";
+                } else {
+                    headerA.style.backgroundColor = "";
+                }
                 hiddenForHead.style.display = ""
                 body.style.overflowY = "auto"
             } else {
                 menuUL.style.maxHeight = "initial";
                 btnToggle_.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" fill="none"><path d="M25.3332 8.54675L23.4532 6.66675L15.9998 14.1201L8.5465 6.66675L6.6665 8.54675L14.1198 16.0001L6.6665 23.4534L8.5465 25.3334L15.9998 17.8801L23.4532 25.3334L25.3332 23.4534L17.8798 16.0001L25.3332 8.54675Z" fill="white"/></svg>'
-                headerA.style.height = "auto";
-                headerA.style.position = "sticky"
-                headerA.style.background = "border-box"
-                headerA.style.height = "100%"
-                headerA.style.width = "100%"
+                headerA.style.position = "fixed"
+                headerA.style.background = ""
                 hiddenForHead.style.display = "none"
                 body.style.overflowY = "hidden"
             }
@@ -35,4 +34,36 @@ document.addEventListener("DOMContentLoaded", function () {
                 signContainer.style.display = "flex";
             }
         });
-    });
+    });
+
+
+// Почекати, поки сторінка завантажиться
+window.addEventListener('load', function() {
+    var header = document.querySelector('.header-container');
+    var scrollPosition = window.scrollY;
+
+    if (scrollPosition > 0) {
+        header.style.backgroundColor = 'rgba(2, 2, 4, 0.70)';
+        header.style.marginTop = '0';
+        header.style.height = '64px';
+    } else {
+        header.style.backgroundColor = '';
+        header.style.marginTop = '8px';
+        header.style.height = '48px';
+    }
+
+    // Додати подію прокрутки після завантаження сторінки
+    window.addEventListener('scroll', function() {
+        var scrollPosition = window.scrollY;
+
+        if (scrollPosition > 0) {
+            header.style.backgroundColor = 'rgba(2, 2, 4, 0.70)';
+            header.style.marginTop = '0';
+            header.style.height = '64px';
+        } else {
+            header.style.backgroundColor = '';
+            header.style.marginTop = '8px';
+            header.style.height = '48px';
+        }
+    });
+});
diff --git a/users/templates/style/base.css b/users/templates/style/base.css
@@ -15,24 +15,23 @@ li {
 }
 
 .header-container {
-    z-index: 1;
-    width: 100%;
-    max-width: 1240px;
     height: 48px;
-    flex-shrink: 0;
-    position: sticky;
-    margin-left: auto;
-    margin-right: auto;
+    margin-top: 8px;
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
     display: flex;
-    justify-content: space-between;
+    justify-content: center;
     align-items: center;
+    z-index: 9999;
+    gap: 41px;
 }
 
 /* Container 1: Logo */
 .logo-container {
     display: flex;
     align-items: center;
-    margin-top: 16px;
 }
 
 /* Container 2: Navigation */
@@ -138,7 +137,6 @@ li {
 
 /* Gamburger */
 .btn-toggle {
-    margin-top: 16px;
     background: transparent;
     float: right;
     border: none;
@@ -150,7 +148,6 @@ li {
 
 
 .change-cont {
-    margin-top: 16px;
     display: flex;
     gap: 56px;
 }
@@ -376,8 +373,9 @@ li {
     /* HEADER */
     .header-container {
         height: 48px;
-        align-items: flex-start;
+        align-items: center;
         z-index: 9999;
+        gap: 0;
     }
 
     .change-cont {

diff --git a/vr_club_site/templates/site/style/game-carousel.css b/vr_club_site/templates/site/style/game-carousel.css
@@ -571,7 +571,7 @@
 
 @media screen and (max-width: 768px) {
     .section-games {
-        margin-top: 96px;
+        margin-top: 76px;
     }
 
     .games {

diff --git a/vr_club_site/templates/site/style/index.css b/vr_club_site/templates/site/style/index.css
@@ -478,7 +478,7 @@
     }
 
     .section-what-to-play {
-        margin-top: 90px;
+        margin-top: 96px;
     }
 
     /*  What to play   */