Add scroll reveal

diff --git a/docs/_includes/blog-hero.html b/docs/_includes/blog-hero.html
index b8f4c22a994815320778f6917560e87ea4f7bde0..30b959604fdaf42139ce0d0020d18a41ec64d386 100644 (file)
--- a/docs/_includes/blog-hero.html
+++ b/docs/_includes/blog-hero.html
@@ -1,6 +1,4 @@
-<div class="container">
-  {% include navbar.html id="BlogHero" %}
-</div>
+{% include navbar.html id="BlogHero" %}
 
 <section class="hero is-warning">
   <div class="hero-body">

diff --git a/docs/_includes/navbar.html b/docs/_includes/navbar.html
index caf51d706ad940c743cfa4353a80d8bfa4f499eb..4552dd4f73cd9f92f6cfedf59c55dd45383856b4 100644 (file)
--- a/docs/_includes/navbar.html
+++ b/docs/_includes/navbar.html
@@ -1,7 +1,7 @@
-<nav id="navbar" class="navbar {% if include.fixed %}is-fixed-top has-shadow{% endif %} {% if include.transparent %}is-transparent{% endif %}">
-  {% if include.has_container %}
-    <div class="container">
-  {% endif %}
+<nav id="navbar" class="navbar is-fixed-top {% if include.transparent %}is-transparent{% endif %}">
+  <div id="specialShadow" class="bd-special-shadow"></div>
+
+  <div class="container">
 
   <div class="navbar-brand">
     <a class="navbar-item" href="{{ site.url }}">
@@ -20,7 +20,7 @@
       </span>
     </a>
 
-    <div class="navbar-burger burger" data-target="navMenu{{ include.id }}">
+    <div id="navbarBurger" class="navbar-burger burger" data-target="navMenu{{ include.id }}">
       <span></span>
       <span></span>
       <span></span>
@@ -187,7 +187,5 @@
     </div>
   </div>
 
-  {% if include.has_container %}
-    </div>
-  {% endif %}
+  </div>
 </nav>

diff --git a/docs/_javascript/main.js b/docs/_javascript/main.js
index d0fb65d030bcc44593855c480e910a3bbccb5e60..4130d3eb3c31f5fee7da20c1ad6ee18899ac34f5 100644 (file)
--- a/docs/_javascript/main.js
+++ b/docs/_javascript/main.js
@@ -57,7 +57,7 @@ document.addEventListener('DOMContentLoaded', () => {
 
   // Modals
 
-  const $html = document.documentElement;
+  const rootEl = document.documentElement;
   const $modals = getAll('.modal');
   const $modalButtons = getAll('.modal-button');
   const $modalCloses = getAll('.modal-background, .modal-close, .modal-card-head .delete, .modal-card-foot .button');
@@ -67,7 +67,7 @@ document.addEventListener('DOMContentLoaded', () => {
       $el.addEventListener('click', () => {
         const target = $el.dataset.target;
         const $target = document.getElementById(target);
-        $html.classList.add('is-clipped');
+        rootEl.classList.add('is-clipped');
         $target.classList.add('is-active');
       });
     });
@@ -90,7 +90,7 @@ document.addEventListener('DOMContentLoaded', () => {
   });
 
   function closeModals() {
-    $html.classList.remove('is-clipped');
+    rootEl.classList.remove('is-clipped');
     $modals.forEach($el => {
       $el.classList.remove('is-active');
     });
@@ -164,27 +164,96 @@ document.addEventListener('DOMContentLoaded', () => {
     return Array.prototype.slice.call(document.querySelectorAll(selector), 0);
   }
 
-  let latestKnownScrollY = 0;
-  let ticking = false;
+  // Scrolling
+
+  const navbarEl = document.getElementById('navbar');
+  const navbarBurger = document.getElementById('navbarBurger');
+  const specialShadow = document.getElementById('specialShadow');
+  const navbarHeight = 52;
+  let navbarOpen = false;
+  let pinned = false;
+  let horizon = navbarHeight;
+  let whereYouStoppedScrolling = 0;
+  let threshold = 200;
+  let scrollFactor = 0;
+
+  navbarBurger.addEventListener('click', el => {
+    navbarOpen = !navbarOpen;
+
+    if (navbarOpen) {
+      rootEl.classList.add('bd-is-clipped-touch');
+    } else {
+      rootEl.classList.remove('bd-is-clipped-touch');
+    }
+  });
 
-  function scrollUpdate() {
-    ticking = false;
-    // do stuff
+  function upOrDown(lastY, currentY) {
+    if (currentY >= lastY) {
+      return goingDown(currentY);
+    }
+    return goingUp(currentY);
   }
 
+  function goingDown(currentY) {
+    const trigger = navbarHeight;
+    whereYouStoppedScrolling = currentY;
+
+    if (currentY > horizon) {
+      horizon = currentY;
+    }
 
-  function onScroll() {
-    latestKnownScrollY = window.scrollY;
-    scrollRequestTick();
+    translateHeader(currentY);
   }
 
-  function scrollRequestTick() {
-    if(!ticking) {
-      requestAnimationFrame(scrollUpdate);
+  function goingUp(currentY) {
+    const trigger = 0;
+
+    if (currentY < (whereYouStoppedScrolling - navbarHeight)) {
+      horizon = currentY + navbarHeight;
     }
-    ticking = true;
+
+    translateHeader(currentY);
+  }
+
+  function constrainDelta(delta) {
+    return Math.max(0, Math.min(delta, navbarHeight));
   }
 
-   window.addEventListener('scroll', onScroll, false);
+  function translateHeader(currentY) {
+    const delta = constrainDelta(Math.abs(currentY - horizon));
+    const translateValue = delta - navbarHeight;
+    const translateFactor = 1 + translateValue / navbarHeight;
+    let navbarStyle = `
+      transform: translateY(${translateValue}px);
+    `;
+
+    if (currentY > threshold) {
+      scrollFactor = 1;
+    } else {
+      scrollFactor = currentY / threshold;
+    }
+    specialShadow.style.opacity = scrollFactor;
+    specialShadow.style.transform = 'scaleY(' + translateFactor + ')';
+
+    navbarEl.setAttribute('style', navbarStyle);
+  }
+
+  translateHeader(window.scrollY);
+
+  let ticking = false;
+  let lastY = 0;
+  window.addEventListener('scroll', function() {
+    const currentY = window.scrollY;
+
+    if (!ticking) {
+      window.requestAnimationFrame(function() {
+        upOrDown(lastY, currentY);
+        ticking = false;
+        lastY = currentY;
+      });
+    }
+
+    ticking = true;
+  });
 
 });

diff --git a/docs/_layouts/default.html b/docs/_layouts/default.html
index 7708aab0a8aac7890fc53d21e7ce0e622509b488..e168fb7fc625bd1212155ad7b00b4527ee33994a 100644 (file)
--- a/docs/_layouts/default.html
+++ b/docs/_layouts/default.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en" class="{% if page.fixed_navbar %}has-navbar-fixed-top{% endif %} {% if page.route %}route-{{page.route}}{% elsif page.layout %}route-{{page.layout}}{% endif %}">
+<html lang="en" class="has-navbar-fixed-top {% if page.route %}route-{{page.route}}{% elsif page.layout %}route-{{page.layout}}{% endif %}">
   {% include head.html %}
   <body class="layout-{{ page.layout }}{% if page.doc-tab %} page-{{ page.doc-tab}}{% endif %}">
     {% include deprecated.html %}

diff --git a/docs/_sass/specific.sass b/docs/_sass/specific.sass
index 43788d3807231e84366fa99d74d893b4bd084108..858d9951726e966f5baf73cacf7eaf9b9be09e65 100644 (file)
--- a/docs/_sass/specific.sass
+++ b/docs/_sass/specific.sass
@@ -1,3 +1,18 @@
+.bd-special-shadow
+  background-image: linear-gradient(rgba(#000, 0.1), rgba(#000, 0))
+  height: 10px
+  left: 0
+  opacity: 0
+  position: absolute
+  right: 0
+  top: 100%
+  transform: scaleY(0)
+  transform-origin: center top
+
++touch
+  .bd-is-clipped-touch
+    overflow: hidden !important
+
 #images
   tr
     td:nth-child(2)

diff --git a/docs/bulma-start.html b/docs/bulma-start.html
index e25124a0aecbaac5e24d4fe867e9361ba656fc19..ff7d24520de05954a69d058525ca925d253db970 100644 (file)
--- a/docs/bulma-start.html
+++ b/docs/bulma-start.html
@@ -7,9 +7,7 @@ github_url: https://github.com/jgthms/bulma-start
 npm_url: https://www.npmjs.com/package/bulma-start
 ---
 
-<div class="container">
-  {% include navbar.html id="BulmaStartHero" %}
-</div>
+{% include navbar.html id="BulmaStartHero" %}
 
 <section class="hero is-success">
   <div class="hero-body">

diff --git a/docs/css/bulma-docs.css b/docs/css/bulma-docs.css
index 6d8b0443e73b65858e15d153abf3838eaaa5846a..c07e8186e8996667137189f613c902ac86e48cce 100644 (file)
--- a/docs/css/bulma-docs.css
+++ b/docs/css/bulma-docs.css
@@ -6655,6 +6655,11 @@ a.navbar-link.is-active {
   .navbar.is-fixed-top-touch {
     top: 0;
   }
+  .navbar.is-fixed-top .navbar-menu, .navbar.is-fixed-top-touch .navbar-menu {
+    -webkit-overflow-scrolling: touch;
+    max-height: calc(100vh - 3.25rem);
+    overflow: auto;
+  }
   html.has-navbar-fixed-top-touch {
     padding-top: 3.25rem;
   }
@@ -10349,6 +10354,24 @@ svg {
   text-decoration: underline;
 }
 
+.bd-special-shadow {
+  background-image: linear-gradient(rgba(0, 0, 0, 0.1), transparent);
+  height: 10px;
+  left: 0;
+  opacity: 0;
+  position: absolute;
+  right: 0;
+  top: 100%;
+  transform: scaleY(0);
+  transform-origin: center top;
+}
+
+@media screen and (max-width: 1023px) {
+  .bd-is-clipped-touch {
+    overflow: hidden !important;
+  }
+}
+
 #images tr td:nth-child(2) {
   width: 320px;
 }

diff --git a/docs/expo.html b/docs/expo.html
index 9185fa0d79f7be0ab200dba70f1a442a3f5919e0..466e2063020401e1057fe3cb99296b32f77653b2 100644 (file)
--- a/docs/expo.html
+++ b/docs/expo.html
@@ -96,9 +96,7 @@ websites:
 </div>
 {% endcapture %}
 
-<div class="container">
-  {% include navbar.html id="ExpoHero" %}
-</div>
+{% include navbar.html id="ExpoHero" %}
 
 <section class="hero is-success">
   <div class="hero-body">

diff --git a/docs/extensions.html b/docs/extensions.html
index d5a3ff4c2e23c7ef018d64c9fb18cb92621fc7b6..95e6c6cf6ae9a8bc004aae666a11c4ad76f5f68f 100644 (file)
--- a/docs/extensions.html
+++ b/docs/extensions.html
@@ -85,9 +85,7 @@ extensions:
   height: 352
 ---
 
-<div class="container">
-  {% include navbar.html id="Extensions" %}
-</div>
+{% include navbar.html id="Extensions" %}
 
 <section class="hero is-primary">
   <div class="hero-body">

diff --git a/docs/index.html b/docs/index.html
index 8c78dfd517a245b9e8a9fab95a1a3b5499c105f0..ffb7a62d2998bb083ef0b76597dbe29c421992c2 100644 (file)
--- a/docs/index.html
+++ b/docs/index.html
@@ -4,7 +4,7 @@ route: index
 fixed_navbar: true
 ---
 
-{% include navbar.html id="Index" fixed=true has_container=true %}
+{% include navbar.html id="Index" fixed=true has_container=true boxed=true transparent=true %}
 
 {% include index/intro.html %}
 

diff --git a/docs/lib/main.js b/docs/lib/main.js
index a8969d1df39c2cadfb6794b9ad54f02a99db9cad..5a433b71d75995c86cb921cbf8b9df283ae34a64 100644 (file)
--- a/docs/lib/main.js
+++ b/docs/lib/main.js
@@ -59,7 +59,7 @@ document.addEventListener('DOMContentLoaded', function () {
 
   // Modals
 
-  var $html = document.documentElement;
+  var rootEl = document.documentElement;
   var $modals = getAll('.modal');
   var $modalButtons = getAll('.modal-button');
   var $modalCloses = getAll('.modal-background, .modal-close, .modal-card-head .delete, .modal-card-foot .button');
@@ -69,7 +69,7 @@ document.addEventListener('DOMContentLoaded', function () {
       $el.addEventListener('click', function () {
         var target = $el.dataset.target;
         var $target = document.getElementById(target);
-        $html.classList.add('is-clipped');
+        rootEl.classList.add('is-clipped');
         $target.classList.add('is-active');
       });
     });
@@ -92,7 +92,7 @@ document.addEventListener('DOMContentLoaded', function () {
   });
 
   function closeModals() {
-    $html.classList.remove('is-clipped');
+    rootEl.classList.remove('is-clipped');
     $modals.forEach(function ($el) {
       $el.classList.remove('is-active');
     });
@@ -166,25 +166,93 @@ document.addEventListener('DOMContentLoaded', function () {
     return Array.prototype.slice.call(document.querySelectorAll(selector), 0);
   }
 
-  var latestKnownScrollY = 0;
-  var ticking = false;
+  // Scrolling
+
+  var navbarEl = document.getElementById('navbar');
+  var navbarBurger = document.getElementById('navbarBurger');
+  var specialShadow = document.getElementById('specialShadow');
+  var navbarHeight = 52;
+  var navbarOpen = false;
+  var pinned = false;
+  var horizon = navbarHeight;
+  var whereYouStoppedScrolling = 0;
+  var threshold = 200;
+  var scrollFactor = 0;
+
+  navbarBurger.addEventListener('click', function (el) {
+    navbarOpen = !navbarOpen;
+
+    if (navbarOpen) {
+      rootEl.classList.add('bd-is-clipped-touch');
+    } else {
+      rootEl.classList.remove('bd-is-clipped-touch');
+    }
+  });
 
-  function scrollUpdate() {
-    ticking = false;
-    // do stuff
+  function upOrDown(lastY, currentY) {
+    if (currentY >= lastY) {
+      return goingDown(currentY);
+    }
+    return goingUp(currentY);
   }
 
-  function onScroll() {
-    latestKnownScrollY = window.scrollY;
-    scrollRequestTick();
+  function goingDown(currentY) {
+    var trigger = navbarHeight;
+    whereYouStoppedScrolling = currentY;
+
+    if (currentY > horizon) {
+      horizon = currentY;
+    }
+
+    translateHeader(currentY);
   }
 
-  function scrollRequestTick() {
-    if (!ticking) {
-      requestAnimationFrame(scrollUpdate);
+  function goingUp(currentY) {
+    var trigger = 0;
+
+    if (currentY < whereYouStoppedScrolling - navbarHeight) {
+      horizon = currentY + navbarHeight;
     }
-    ticking = true;
+
+    translateHeader(currentY);
   }
 
-  window.addEventListener('scroll', onScroll, false);
+  function constrainDelta(delta) {
+    return Math.max(0, Math.min(delta, navbarHeight));
+  }
+
+  function translateHeader(currentY) {
+    var delta = constrainDelta(Math.abs(currentY - horizon));
+    var translateValue = delta - navbarHeight;
+    var translateFactor = 1 + translateValue / navbarHeight;
+    var navbarStyle = '\n      transform: translateY(' + translateValue + 'px);\n    ';
+
+    if (currentY > threshold) {
+      scrollFactor = 1;
+    } else {
+      scrollFactor = currentY / threshold;
+    }
+    specialShadow.style.opacity = scrollFactor;
+    specialShadow.style.transform = 'scaleY(' + translateFactor + ')';
+
+    navbarEl.setAttribute('style', navbarStyle);
+  }
+
+  translateHeader(window.scrollY);
+
+  var ticking = false;
+  var lastY = 0;
+  window.addEventListener('scroll', function () {
+    var currentY = window.scrollY;
+
+    if (!ticking) {
+      window.requestAnimationFrame(function () {
+        upOrDown(lastY, currentY);
+        ticking = false;
+        lastY = currentY;
+      });
+    }
+
+    ticking = true;
+  });
 });
\ No newline at end of file

diff --git a/docs/love.html b/docs/love.html
index 70a8e015924f93f2aa11458772dfca355d901296..e8c6c7a2dcb479aa599437b1e02198017bfb517b 100644 (file)
--- a/docs/love.html
+++ b/docs/love.html
@@ -13,9 +13,7 @@ tweets:
   retweets: "0"
 ---
 
-<div class="container">
-  {% include navbar.html id="LoveHero" %}
-</div>
+{% include navbar.html id="LoveHero" %}
 
 <section class="hero bd-is-love bd-rainbow">
   <div class="hero-body">

diff --git a/docs/made-with-bulma.html b/docs/made-with-bulma.html
index 5c10158f45f3b57f785c16a332a8a714d5b36200..9666ccefc91f1f8c59ef6cbe55f39400dda5fd33 100644 (file)
--- a/docs/made-with-bulma.html
+++ b/docs/made-with-bulma.html
@@ -41,9 +41,7 @@ images:
 </a>
 {% endcapture %}
 
-<div class="container">
-  {% include navbar.html id="MadeWithBulmaHero" %}
-</div>
+{% include navbar.html id="MadeWithBulmaHero" %}
 
 <section class="hero is-primary">
   <div class="hero-body">

diff --git a/sass/components/navbar.sass b/sass/components/navbar.sass
index 410b9b0159c9e5a6291ac645806bf4b17d34a050..ed8c7003bb9799dbd6cb3ae8735f81e86e482ec4 100644 (file)
--- a/sass/components/navbar.sass
+++ b/sass/components/navbar.sass
@@ -222,6 +222,12 @@ a.navbar-link
         box-shadow: 0 -2px 3px rgba($black, 0.1)
     &.is-fixed-top-touch
       top: 0
+    &.is-fixed-top,
+    &.is-fixed-top-touch
+      .navbar-menu
+        +overflow-touch
+        max-height: calc(100vh - #{$navbar-height})
+        overflow: auto
   html.has-navbar-fixed-top-touch
     padding-top: $navbar-height
   html.has-navbar-fixed-bottom-touch