feat(minimise): implemented detection for scrolling past element height assuming element is fixed at

Author: edoparearyee

src/demo/app/app.component.css

@@ -5,21 +5,32 @@
 }
 
 .foo {
+  align-items: center;
   background-color: #563d7c;
-  left: 0;
+  color: #ffffff;
+  display: flex;
   height: 100px;
+  justify-content: center;
+  left: 0;
   position: fixed;
   right: 0;
+  text-align: center;
   top: 0;
-  transition: opacity .35s ease-in-out;
+  transition: all .35s ease-in-out;
+}
+.foo .down,
+.foo .up {
+  display: none;
 }
 
-.foo.sn-scrolling-down {
-  opacity: 0;
+.foo.sn-scrolling-down .down,
+.foo.sn-scrolling-up .up {
+  display: block;
 }
 
-.foo.sn-scrolling-up {
-  opacity: 1;
+.foo.sn-minimise {
+  background-color: #007bff;
+  height: 50px;
 }
 
 .spacer {

src/demo/app/app.component.html

@@ -1,3 +1,7 @@
-<h1>Scroll down ↓ and right →</h1>
-<nav class="foo" scrollCollapse [debounce]="0"></nav>
+<h1>Scroll down ↓</h1>
+<nav class="foo" scrollCollapse [debounce]="0">
+  My nav&nbsp;
+  <span class="down">Going down</span>
+  <span class="up">Going up</span>
+</nav>
 <div class="spacer"></div>

src/lib/src/classes.ts

@@ -1,2 +1,4 @@
 export const directionUpClass = 'class.sn-scrolling-up';
 export const directionDownClass = 'class.sn-scrolling-down';
+export const affixClass = 'class.sn-affix';
+export const minimiseClass = 'class.sn-minimise';

src/lib/src/scroll-collapse.directive.ts

@@ -17,9 +17,9 @@ import * as classes from './classes';
  * that detects scroll direction and adds a `sn-scrolling-up` or
  * `sn-scrolling-down` class to the element. The library can also detect when
  * the user has scrolled passed the element and apply a `sn-affix` class.
- * Useful for make a element sticky when the user has scrolled beyond it. This
- * library can will also apply `sn-minimize` class after the user has scrolled
- * beyond the height of the element.
+ * Useful for make a element sticky when the user has scrolled beyond it.
+ * This library can will also apply `sn-minimize` class after the user has
+ * scrolled beyond the height of the element.
  *
  * @example
  * ```
@@ -89,6 +89,15 @@ export class ScrollCollapseDirective implements OnInit, OnDestroy {
   public get isScrollingDown(): boolean {
     return this.scrollDirection === Direction.DOWN;
   }
+  /**
+   * Returns true if the user has scrolled pass the origin height of
+   * the element assuming the element is fixed at the top of the page
+   *
+   * @type {boolean}
+   * @memberof ScrollCollapseDirective
+   */
+  @HostBinding(classes.minimiseClass)
+  public minimiseMode = false;
   /**
    * Creates an instance of ScrollCollapseDirective.
    * @param {ElementRef} el
@@ -106,7 +115,10 @@ export class ScrollCollapseDirective implements OnInit, OnDestroy {
       .takeUntil(this.ngUnsubscribe$)
       .debounceTime(this.debounce)
       .bufferCount(2, 1)
-      .subscribe((events: Viewport[]) => this.calculateScrollDirection(events));
+      .subscribe((events: Viewport[]) => {
+        this.calculateScrollDirection(events);
+        this.calculateMinimiseMode(events[1]);
+      });
   }
   /**
    * On window scroll/resize/load events
@@ -131,10 +143,10 @@ export class ScrollCollapseDirective implements OnInit, OnDestroy {
     this.viewport$.next(viewport);
   }
   /**
-   * Calculate scrollCollapse status and emit event
-   * when viewport status has changed
+   * Calculate last scroll direction by comparing y scroll position
+   * of last two values of `viewport$` observable
    *
-   * @param {Viewport} viewport
+   * @param {Viewport[]} events
    * @memberof ScrollCollapseDirective
    */
   public calculateScrollDirection(events: Viewport[]): void {
@@ -143,6 +155,17 @@ export class ScrollCollapseDirective implements OnInit, OnDestroy {
     this.scrollDirection = (pastEvent.scrollY > currentEvent.scrollY) ?
       Direction.UP : Direction.DOWN;
   }
+  /**
+   * Calculate if the user has scrolled pass the origin height of
+   * the element assuming the element is fixed at the top of the page
+   *
+   * @param {Viewport} viewport
+   * @memberof ScrollCollapseDirective
+   */
+  public calculateMinimiseMode(viewport: Viewport): void {
+    const el: HTMLElement = this.el.nativeElement;
+    this.minimiseMode = viewport.scrollY > el.offsetHeight;
+  }
   /**
    * trigger `ngUnsubscribe` complete on
    * component destroy lifecycle hook