summaryrefslogtreecommitdiff
path: root/_includes/views/header.html
diff options
context:
space:
mode:
authorJeffrey Tse <jeffreytse.mail@gmail.com>2019-09-20 12:40:14 +0800
committerJeffrey Tse <jeffreytse.mail@gmail.com>2019-09-20 12:40:14 +0800
commitce43bb9a6aab445286afac54e5048b1547efa63d (patch)
treef4d01fb28607772e30e28fbc09f18441f814847c /_includes/views/header.html
parente3081ca386f6c5e296c8dfbafd89e37738153601 (diff)
update: header transparent, animation, banner, etc
Diffstat (limited to '_includes/views/header.html')
-rw-r--r--_includes/views/header.html59
1 files changed, 58 insertions, 1 deletions
diff --git a/_includes/views/header.html b/_includes/views/header.html
index 06a20ed..10637c2 100644
--- a/_includes/views/header.html
+++ b/_includes/views/header.html
@@ -1,4 +1,19 @@
-<header class="site-header" role="banner">
+
+{%- include functions.html func='log' level='debug' msg='Get banner value' -%}
+{% assign name = 'banner' %}
+{%- include functions.html func='get_value' -%}
+{% assign banner = return %}
+
+{%- include functions.html func='log' level='debug' msg='Get header_transparent value' -%}
+{% assign name = 'header_transparent' %}
+{%- include functions.html func='get_value' -%}
+{% assign header_transparent = return %}
+
+{%- if banner and header_transparent -%}
+ {%- assign header_transparent_class = "site-header-transparent" -%}
+{%- endif -%}
+
+<header class="site-header {{ header_transparent_class }}" role="banner">
<div class="wrapper">
{%- assign default_paths = site.pages | where: "dir", "/" | map: "path" -%}
@@ -42,3 +57,45 @@
{%- endif -%}
</div>
</header>
+
+<script>
+ (function() {
+ var supportPageOffset = window.pageXOffset !== undefined;
+ var isCSS1Compat = ((document.compatMode || "") === "CSS1Compat");
+
+ function scrollY() {
+ return supportPageOffset ? window.pageYOffset : isCSS1Compat ? document.documentElement.scrollTop : document.body.scrollTop;
+ }
+
+ var lastScrollY = scrollY();
+ var dataset = document.documentElement.dataset;
+
+ function storeScrollData() {
+ var y = scrollY();
+
+ {%- if banner and header_transparent -%}
+ dataset.headerTransparent = "";
+ {%- endif -%}
+
+ var scrollStatus = "";
+
+ if (y <= 0) {
+ scrollStatus = "top";
+ } else if ((window.innerHeight + y) >= document.body.offsetHeight) {
+ scrollStatus = "bottom";
+ } else {
+ var isScrollDown = (y - lastScrollY > 0) ? true : false;
+ scrollStatus = isScrollDown ? "down" : "up";
+ }
+
+ lastScrollY = y;
+ dataset.scrollStatus = scrollStatus;
+ }
+
+ window.addEventListener('scroll', function(e) {
+ storeScrollData();
+ });
+
+ storeScrollData();
+ })();
+</script>