diff --git a/src/css/header.css b/src/css/header.css
index 31cc575f3ce30f7e249e09d7fb01a6cd9ff52db9..10b659b305b0b2957ae1aa046d861fe4069ccc60 100644
--- a/src/css/header.css
+++ b/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 {
diff --git a/src/js/07-header.js b/src/js/07-header.js
new file mode 100644
index 0000000000000000000000000000000000000000..a16f6866e307bba8910b2355713cdb3d45e99302
--- /dev/null
+++ b/src/js/07-header.js
@@ -0,0 +1,13 @@
+;(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')
+    }
+  })
+})()