Hide the navbar on scroll #49

docs/docs/0.7/navbar.md

@@ -96,4 +96,22 @@ Since 0.6.1 Bulma has provided a `is-fixed-top` class for the navbar, along with
 
 Since `0.7.0` BulmaJS has provided the functionality to do just this! First, specify the `data-sticky` attribute on your navbar. This will enable the event listener for scroll, by default the offset is set to `0` which does nothing extra than just adding the class to the element.
 
-You can control the offset of the navbar using `data-sticky-offset` this access a number and is the number of pixels the user needs to scroll before the navbar sticks to the top.
+You can control the offset of the navbar using `data-sticky-offset` this access a number and is the number of pixels the user needs to scroll before the navbar sticks to the top.
+
+## Hide the navbar when scrolling
+It can sometimes be useful to hide the navbar when your user is scrolling down, and then show it again when scrolling up. As of `0.7.0` the navbar plugin provides this functionality. To enable it, add the `data-hide-on-scroll` attribute to your navbar element. Do note this also needs `data-sticky` to be enabled as well.
+
+You can specify the `tolerance` before the navbar is hidden/shown by adding a `data-tolerance` attribute. This accepts an integer and is the number of pixels between each scroll event. I.e. the 'force' required to hide/show the navbar.
+
+When the navbar is hidden the `is-hidden-scroll` class is added to it, allowing you to detect this via CSS and hide the navbar. This also allows you to add CSS animations. An example implemention would be:
+
+```css
+.navbar {
+    transform: translateY(0);
+    transition: transform 0.2s ease-in-out;
+}
+
+.navbar.is-hidden-scroll {
+    transform: translateY(-100%);
+}
+```

src/plugins/navbar.js

@@ -25,7 +25,9 @@ class Navbar extends Plugin {
         new Navbar({
             element: element,
             sticky: element.hasAttribute('data-sticky') ? true : false,
-            stickyOffset: element.hasAttribute('data-sticky-offset') ? element.getAttribute('data-sticky-offset') : 0
+            stickyOffset: element.hasAttribute('data-sticky-offset') ? element.getAttribute('data-sticky-offset') : 0,
+            hideOnScroll: element.hasAttribute('data-hide-on-scroll') ? true : false,
+            tolerance: element.hasAttribute('data-tolerance') ? element.getAttribute('data-tolerance') : 0
         });
     }
 
@@ -36,7 +38,9 @@ class Navbar extends Plugin {
     static defaultOptions() {
         return {
             sticky: false,
-            stickyOffset: 0
+            stickyOffset: 0,
+            hideOnScroll: false,
+            tolerance: 0
         };
     }
 
@@ -83,6 +87,24 @@ class Navbar extends Plugin {
          */
         this.stickyOffset = parseInt(this.option('stickyOffset'));
 
+        /**
+         * Should the navbar hide when scrolling? Note: this just applies a 'is-hidden-scroll' class.
+         * @type {boolean}
+         */
+        this.hideOnScroll = this.option('hideOnScroll');
+
+        /**
+         * The amount of tolerance required before checking the navbar should hide/show
+         * @type {number}
+         */
+        this.tolerance = this.option('tolerance');
+
+        /**
+         * The last scroll Y known, this is used to calculate scroll direction
+         * @type {number}
+         */
+        this.lastScrollY = 0;
+
         this.registerEvents();
     }
 
@@ -133,6 +155,34 @@ class Navbar extends Plugin {
             this.element.classList.remove('is-fixed-top');
             document.body.classList.remove('has-navbar-fixed-top');
         }
+
+        if(this.hideOnScroll) {
+            let scrollDirection = this.calculateScrollDirection(scrollY, this.lastScrollY);
+            let triggeredTolerance = this.differance(scrollY, this.lastScrollY) >= this.tolerance;
+            console.log(this.differance(scrollY, this.lastScrollY), scrollY, this.lastScrollY);
+
+            if(triggeredTolerance) {
+                if(scrollDirection === 'down') {
+                    this.element.classList.add('is-hidden-scroll');
+                } else {
+                    this.element.classList.remove('is-hidden-scroll');
+                }
+            }
+
+            this.lastScrollY = scrollY;
+        }
+    }
+
+    differance(a, b) {
+        if (a > b) {
+            return a - b;
+        } else {
+            return b - a;
+        }
+    }
+
+    calculateScrollDirection(currentY, lastY) {
+        return currentY >= lastY ? 'down' : 'up';
     }
 }