Merge pull request #28 from KoptevAnton/feature/header-fixed

Improve header navigation.

src/css/header.css

@@ -1,19 +1,21 @@
 .header {
   z-index: 2;
-  position: absolute;
+  position: fixed;
   width: 100%;
-  min-width: 320px;
-  max-width: 375px;
-  background-color: transparent;
-  top: 32px;
-  left: 50%;
-  transform: translateX(-50%);
+  padding-top: 32px;
+  padding-bottom: 32px;
+  height: 92px;
+  transition: all 350ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.header-bg {
+  background-color: rgba(0, 0, 0, 0.4);
 }
 
 .header-content-wrap {
   display: flex;
-  align-items: start;
   justify-content: space-between;
+  align-items: flex-start;
 }
 
 .logo {
@@ -24,6 +26,18 @@
   border-radius: 18px;
 }
 
+.logo-wrapper {
+  transform: translate(0%, 0%);
+  transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.is-hide {
+  transform: translate(0%, -140%);
+  opacity: 0;
+  visibility: hidden;
+  pointer-events: none;
+}
+
 .logo-text {
   font-weight: 500;
   font-size: 20px;
@@ -63,7 +77,7 @@
   padding: 14px;
   outline: none;
   background-color: var(--main-color);
-  transition: all 300ms ease-in-out;
+  transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 .change-color-btn:hover,
@@ -84,7 +98,8 @@
   opacity: 0;
   visibility: hidden;
   pointer-events: none;
-  transition: opacity 300ms ease-in-out, visibility 300ms ease-in-out;
+  transition: opacity 300ms cubic-bezier(0.4, 0, 0.2, 1),
+    visibility 300ms cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 .change-color {
@@ -97,7 +112,7 @@
   pointer-events: auto;
   display: block;
   z-index: 999;
-  transition: all 300ms ease-in-out;
+  transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 .is-open-change-color {
@@ -122,7 +137,7 @@
   height: 52px;
   width: 52px;
   border-radius: 50%;
-  transition: all 300ms ease-in-out;
+  transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 .color-option:hover,
@@ -174,7 +189,7 @@
 }
 .open-menu-mob-icon {
   stroke: #fafafa;
-  transition: all 300ms ease-in-out;
+  transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 .open-menu-mob {
@@ -292,7 +307,7 @@
 }
 
 .close-icon {
-  transition: all 300ms ease-in-out;
+  transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
   z-index: 3;
 }
 
@@ -316,7 +331,7 @@
 
 .menu-link {
   display: flex;
-  transition: all 300ms ease-in-out;
+  transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 .menu-link:focus {
@@ -343,7 +358,7 @@
   padding: 14px 31px;
   border: none;
   background-color: var(--main-color);
-  transition: all 300ms ease-in-out;
+  transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 @media screen and (max-width: 768px) {
@@ -378,22 +393,13 @@
   }
 
   .header {
-    max-width: 768px;
-  }
-
-  .header > .container {
-    padding: 0 32px;
-    margin: 0;
+    height: 119px;
   }
 
   .modal {
     display: none;
   }
 
-  .menu {
-    display: block;
-  }
-
   .menu-btn {
     display: block;
     padding: 10px;
@@ -414,8 +420,22 @@
     flex-direction: column;
     align-items: center;
     gap: 5px;
-    transition: opacity 300ms cubic-bezier(0.4, 0, 0.2, 1),
-      visibility 0ms linear 300ms;
+    transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
+  }
+
+  .menu-list-scroll {
+    flex-direction: row;
+  }
+
+  .menu {
+    display: block;
+    transform: translate(0%, 0%);
+    transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
+  }
+
+  .menu-scroll {
+    display: flex;
+    transform: translate(-80%, 0%);
   }
 
   .menu-list.is-open {
@@ -454,7 +474,7 @@
     border: none;
     line-height: 1.2;
     background-color: var(--main-color);
-    transition: all 300ms ease-in-out;
+    transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
   }
 
   .order-btn:hover,
@@ -507,8 +527,8 @@
     right: 20px;
   }
 
-  .header {
-    max-width: 1440px;
+  .menu-scroll {
+    transform: translate(-200%, 0%);
   }
 }
 

src/js/backToTop.js

@@ -1,7 +1,7 @@
 import { btnTop } from './elements.js';
 
 window.addEventListener('scroll', () => {
-  if (window.scrollY > 100) {
+  if (window.scrollY > 40) {
     btnTop.classList.add('show');
   } else {
     btnTop.classList.remove('show');

src/js/elements.js

@@ -11,6 +11,9 @@ const coversBackground = document.querySelector('.covers-background');
 const coversWrapper = document.querySelector('.covers-wrapper');
 
 //header
+const headerEl = document.querySelector('.header');
+const logoWrapperEl = document.querySelector('.logo-wrapper');
+const menuEl = document.querySelector('.menu');
 const mobileModalBtn = document.querySelector('.mobile-menu-btn');
 const modal = document.querySelector('.modal');
 const closeModalBtn = document.querySelector('.close-menu-btn');
@@ -44,6 +47,9 @@ export {
   coversSection,
   coversBackground,
   coversWrapper,
+  headerEl,
+  logoWrapperEl,
+  menuEl,
   mobileModalBtn,
   modal,
   closeModalBtn,

src/js/header-scroll.js

@@ -0,0 +1,29 @@
+import { headerEl, logoWrapperEl, menuEl, menuList } from './elements.js';
+
+window.onscroll = function () {
+  if (window.screen.width >= 768) {
+    if (scrollY <= 40) {
+      headerEl.classList.remove('header-bg');
+      logoWrapperEl.classList.remove('is-hide');
+      menuList.classList.remove('menu-list-scroll');
+      menuEl.classList.remove('menu-scroll');
+    } else {
+      headerEl.classList.add('header-bg'),
+      logoWrapperEl.classList.add('is-hide');
+      menuList.classList.add('menu-list-scroll');
+      menuEl.classList.add('menu-scroll');
+    }
+  } else {
+    if (scrollY <= 120) {
+      headerEl.classList.remove('header-bg');
+      logoWrapperEl.classList.remove('is-hide');
+      menuList.classList.remove('menu-list-scroll');
+      menuEl.classList.remove('menu-scroll');
+    } else {
+      headerEl.classList.add('header-bg'),
+      logoWrapperEl.classList.add('is-hide');
+      menuList.classList.add('menu-list-scroll');
+      menuEl.classList.add('menu-scroll');
+    }
+  }
+};

src/main.js

@@ -7,3 +7,4 @@ import './js/swagger-api.js';
 import './js/backToTop.js';
 import './js/about-me.js';
 import './js/faq.js';
+import './js/header-scroll.js';

src/partials/header.html

@@ -1,6 +1,6 @@
 <header class="header">
-  <div class="container">
-    <div class="header-content-wrap">
+  <div class="header-content-wrap container">
+    <div class="logo-wrapper">
       <a href="./index.html" class="logo">
         <img
           srcset="
@@ -14,28 +14,28 @@
         />
         <span class="logo-text">jefferson&ast;</span>
       </a>
-      <div class="menu">
-        <button class="menu-btn">Menu</button>
-        <ul class="menu-list">
-          <li class="menu-item">
-            <a class="menu-link" href="#about-me">About me</a>
-          </li>
-          <li class="menu-item">
-            <a class="menu-link" href="#benefits">Benefits</a>
-          </li>
-          <li class="menu-item">
-            <a class="menu-link" href="#projects">Projects</a>
-          </li>
-          <li class="menu-item"><a class="menu-link" href="#faq">FAQ</a></li>
-        </ul>
-      </div>
-      <button class="mobile-menu-btn">
-        <svg class="open-menu-mob">
-          <use href="./img/icons.svg#burger" class="open-menu-mob-icon"></use>
-        </svg>
-      </button>
-      <a href="#work-together" class="order-btn">Order the project</a>
     </div>
+    <div class="menu">
+      <button class="menu-btn">Menu</button>
+      <ul class="menu-list">
+        <li class="menu-item">
+          <a class="menu-link" href="#about-me">About me</a>
+        </li>
+        <li class="menu-item">
+          <a class="menu-link" href="#benefits">Benefits</a>
+        </li>
+        <li class="menu-item">
+          <a class="menu-link" href="#projects">Projects</a>
+        </li>
+        <li class="menu-item"><a class="menu-link" href="#faq">FAQ</a></li>
+      </ul>
+    </div>
+    <button class="mobile-menu-btn">
+      <svg class="open-menu-mob">
+        <use href="./img/icons.svg#burger" class="open-menu-mob-icon"></use>
+      </svg>
+    </button>
+    <a href="#work-together" class="order-btn">Order the project</a>
   </div>
 </header>
 <div class="modal">