aboutsummaryrefslogtreecommitdiff
path: root/juick-www
diff options
context:
space:
mode:
authorGravatar Vitaly Takmazov2018-06-09 13:48:04 +0300
committerGravatar Vitaly Takmazov2018-06-09 13:48:04 +0300
commit2aa5ce4e1e560253d7e2c8cf936b645c5fbfd500 (patch)
tree35153248f941e39398ff7542b822447ecf9d1fcd /juick-www
parent463e64b2048f753675c06ca6dff21ba084f69189 (diff)
www: transparent header
Diffstat (limited to 'juick-www')
-rw-r--r--juick-www/src/main/assets/scripts.js20
-rw-r--r--juick-www/src/main/assets/style.css6
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%);
}