update header style

src/css/header.css

@@ -10,7 +10,6 @@ body {
 
 .navbar {
   background: var(--nav-background);
-  box-shadow: 0 0 0.4rem rgba(0, 0, 0, 0.1), 0 0.4rem 0.6rem rgba(0, 0, 0, 0.1);
   color: var(--color-bwg-main);
   height: 4.5rem;
   font-size: calc(16 / var(--rem-base) * 1rem);
@@ -19,6 +18,16 @@ body {
   width: 100%;
   z-index: var(--z-index-navbar);
   max-height: 5rem;
+  border-bottom: 1px solid var(--color-blue-30);
+  transition: box-shadow .2s;
+}
+
+.navbar .active {
+  box-shadow: 0 0 0.4rem rgba(0, 0, 0, 0.1), 0 0.4rem 0.6rem rgba(0, 0, 0, 0.1);
+}
+
+.navbar.active {
+  box-shadow: 0 0 0.4rem rgba(0, 0, 0, 0.1), 0 0.4rem 0.6rem rgba(0, 0, 0, 0.1);
 }
 
 .navbar a {

src/js/07-header.js

+;(function () {
+  'use strict'
+
+  document.addEventListener('scroll', function () {
+    var navbar = document.querySelector('.navbar')
+
+    if (window.scrollY > 0) {
+      navbar.classList.add('active')
+    } else {
+      navbar.classList.remove('active')
+    }
+  })
+})()