www: transparent header

2 files changed, 14 insertions, 12 deletions

diff --git a/juick-www/src/main/assets/scripts.js b/juick-www/src/main/assets/scripts.js
index 2cf50ef9..0d9a8846 100644
--- a/juick-www/src/main/assets/scripts.js
+++ b/juick-www/src/main/assets/scripts.js
@@ -739,6 +739,7 @@ ready(function () {
     killy.embedAll();
     var elSelector = 'header',
         elClassHidden = 'header--hidden',
+        elClassBackground = 'header--background',
         throttleTimeout = 500,
         element = document.querySelector(elSelector);
 
@@ -750,10 +751,6 @@ ready(function () {
             wScrollBefore = 0,
             wScrollDiff = 0,
 
-            hasElementClass = function (element, className) { return element.classList ? element.classList.contains(className) : new RegExp('(^| )' + className + '( |$)', 'gi').test(element.className); },
-            addElementClass = function (element, className) { element.classList ? element.classList.add(className) : element.className += ' ' + className; },
-            removeElementClass = function (element, className) { element.classList ? element.classList.remove(className) : element.className = element.className.replace(new RegExp('(^|\\b)' + className.split(' ').join('|') + '(\\b|$)', 'gi'), ' '); },
-
             throttle = function (delay, fn) {
                 var last, deferTimer;
                 return function () {
@@ -781,18 +778,21 @@ ready(function () {
 
             if (wScrollCurrent <= 0) {
                 // scrolled to the very top; element sticks to the top
-                removeElementClass(element, elClassHidden);
-            } else if (wScrollDiff > 0 && hasElementClass(element, elClassHidden)) {
+                element.classList.remove(elClassHidden);
+                element.classList.remove(elClassBackground);
+            } else if (wScrollDiff > 0 && element.classList.contains(elClassHidden)) {
                 // scrolled up; element slides in
-                removeElementClass(element, elClassHidden);
+                element.classList.remove(elClassHidden);
+                element.classList.add(elClassBackground);
             } else if (wScrollDiff < 0) {
                 // scrolled down
-                if (wScrollCurrent + wHeight >= dHeight && hasElementClass(element, elClassHidden)) {
+                if (wScrollCurrent + wHeight >= dHeight && element.classList.contains(elClassHidden)) {
                     // scrolled to the very bottom; element slides in
-                    removeElementClass(element, elClassHidden);
+                    element.classList.remove(elClassHidden);
+                    element.classList.add(elClassBackground);
                 } else {
                     // scrolled down; element slides out
-                    addElementClass(element, elClassHidden);
+                    element.classList.add(elClassHidden);
                 }
             }
 
diff --git a/juick-www/src/main/assets/style.css b/juick-www/src/main/assets/style.css
index 20b2a0b7..82d2a91e 100644
--- a/juick-www/src/main/assets/style.css
+++ b/juick-www/src/main/assets/style.css
@@ -96,8 +96,6 @@ html {
     color: #fff;
 }
 body > header {
-    box-shadow: 0 0 3px rgba(0, 0, 0, 0.28);
-    background: #fff;
     position: fixed;
     top: 0;
     width: 100%;
@@ -121,6 +119,10 @@ body > header {
     flex-wrap: wrap;
     padding: 4px;
 }
+.header--background {
+    box-shadow: 0 0 3px rgba(0, 0, 0, 0.28);
+    background: #fff;
+}
 .header--hidden {
     transform: translateY(-100%);
 }