fix(ScrollCollapse): fixed issue where affix would not be calculated in nested element with position

Author: edoparearyee

src/app/app.component.html

@@ -1,11 +1,18 @@
 <h1>Scroll down ↓</h1>
+
 <nav class="nav" snScrollCollapse>
   My nav&nbsp;
   <span class="down">Going down</span>
   <span class="up">Going up</span>
 </nav>
+
 <div class="spacer"></div>
-<div class="bar" snScrollCollapse>
-  Sticky when scrolled passed
+
+<!-- nested element -->
+<div class="bar-container">
+  <div class="bar" snScrollCollapse>
+    Sticky when scrolled passed
+  </div>
 </div>
+
 <div class="spacer"></div>

src/app/app.component.scss

@@ -56,3 +56,7 @@
 .spacer {
   height: 150vh;
 }
+
+.bar-container {
+  position: relative;
+}

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

@@ -54,7 +54,7 @@ export class ScrollCollapseDirective implements AfterViewInit, OnDestroy {
    *
    * @memberof ScrollCollapseDirective
    */
-  public originalTop: number;
+  public originalTop = 0;
   /**
    * Original offsetHeight of element
    *
@@ -130,7 +130,12 @@ export class ScrollCollapseDirective implements AfterViewInit, OnDestroy {
    */
   public ngAfterViewInit(): void {
     const el: HTMLElement = this.el.nativeElement;
-    this.originalTop = el.offsetTop;
+    // Check if `getBoundingClientRect` is a function in case running
+    // in an platform without the DOM
+    if (typeof el.getBoundingClientRect === 'function') {
+      const elBounds = el.getBoundingClientRect();
+      this.originalTop = elBounds.top + this.windowRef.scrollY;
+    }
     this.originalHeight = el.offsetHeight;
 
     this.ngZone.runOutsideAngular(() => {

src/styles.scss

@@ -3,3 +3,8 @@ h1 {
   font-family: Arial, Helvetica, sans-serif;
   font-size: 250%;
 }
+
+body {
+  margin: 0;
+  padding: 0;
+}