feat(scroll directive): add yOffset input to class setting functions

apply classes on scroll taking into account yOffset property

Author: jackhkmatthews

src/app/app.component.html

@@ -16,3 +16,12 @@ <h1>Scroll down ↓</h1>
 </div>
 
 <div class="spacer"></div>
+
+<!-- nested element -->
+<div class="bar-container">
+  <div class="bar bar--offset" [yOffset]="200" snScrollCollapse>
+    Classes applied when original Y position of element approaches yOffset. [yOffset]="200"
+  </div>
+</div>
+
+<div class="spacer"></div>

src/app/app.component.scss

@@ -53,6 +53,15 @@
   z-index: 9999;
 }
 
+.bar.bar--offset.sn-affix {
+  top: 100px;
+}
+
+.bar.bar--offset.sn-minimise {
+  background-color: #586e5d;
+  height: 50px;
+}
+
 .spacer {
   height: 150vh;
 }

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

@@ -74,6 +74,17 @@ export class ScrollCollapseDirective implements AfterViewInit, OnDestroy {
    * @memberof ScrollCollapseDirective
    */
   @Input() public debounce = 0;
+  /**
+   * Number of pixels before the elements originalTop
+   * position is scroll to that the classes will be applied.
+   * This value will need to take into account elements which become
+   * fixed above this element while scrolling as they reduce
+   * the height of the document and the scrollY number.
+   *
+   * @default 0
+   * @memberof ScrollCollapseDirective
+   */
+  @Input() public yOffset = 0;
   /**
    * Returns true if last scroll direction is UP
    *
@@ -190,7 +201,7 @@ export class ScrollCollapseDirective implements AfterViewInit, OnDestroy {
    */
   public calculateMinimiseMode(viewport: Viewport): void {
     this.minimiseMode =
-      viewport.scrollY >= this.originalHeight + this.originalTop;
+      viewport.scrollY >= this.originalHeight + this.originalTop - this.yOffset;
   }
   /**
    * Calculate if the user has scrolled pass the origin height of
@@ -199,7 +210,7 @@ export class ScrollCollapseDirective implements AfterViewInit, OnDestroy {
    * @memberof ScrollCollapseDirective
    */
   public calculateAffixMode(viewport: Viewport): void {
-    this.affixMode = viewport.scrollY >= this.originalTop;
+    this.affixMode = viewport.scrollY >= this.originalTop - this.yOffset;
   }
   /**
    * Return current viewport values