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') + } + }) +})()