Merge pull request #23 from thisissoon/feature/y-offset

Feature/y offset

README.md

@@ -104,6 +104,15 @@ In this scenario the nav element will have the class `sn-affix` added when the u
 }
 ```
 
+A `[yOffset]` can also be applied. Here `sn-affix` will be added when the top of the viewport is within 200 pixels of the top of the nav.
+
+```html
+<header>...</header>
+<nav class="foo" snScrollCollapse [yOffset]="200">
+  ...
+</nav>
+```
+
 ### Minimise mode
 
 In this scenario the nav element will have the class `sn-minimise` added when the user scrolls 100px (the original height of the element) down the page.

e2e/app.e2e-spec.ts

@@ -1,59 +1,79 @@
 import { AppPage } from './app.po';
 import { browser, element, by } from 'protractor';
 
-describe('ScrollCollapse Lib E2E Tests', function () {
+describe('ScrollCollapse Lib E2E Tests', function() {
   let page: AppPage;
 
-  beforeEach(() => page = new AppPage());
+  beforeEach(() => (page = new AppPage()));
 
   beforeEach(() => page.navigateTo());
 
   beforeEach(() => browser.executeScript('window.scrollTo(0,0)'));
 
   afterEach(() => {
-    browser.manage().logs().get('browser').then((browserLog: any[]) => {
-      expect(browserLog).toEqual([]);
-    });
+    browser
+      .manage()
+      .logs()
+      .get('browser')
+      .then((browserLog: any[]) => {
+        expect(browserLog).toEqual([]);
+      });
   });
 
   describe('scroll direction', () => {
     it('should add scrolling direction class', () => {
       page.scrollTo();
-      expect(page.getNavElement().getAttribute('class')).not.toContain('sn-scrolling-down');
-      expect(page.getNavElement().getAttribute('class')).not.toContain('sn-scrolling-up');
+      expect(page.getNavElement().getAttribute('class')).not.toContain(
+        'sn-scrolling-down'
+      );
+      expect(page.getNavElement().getAttribute('class')).not.toContain(
+        'sn-scrolling-up'
+      );
 
       page.scrollTo(0, 10);
       page.scrollTo(0, 200);
-      expect(page.getNavElement().getAttribute('class')).toContain('sn-scrolling-down');
-      expect(page.getNavElement().getAttribute('class')).not.toContain('sn-scrolling-up');
-
+      expect(page.getNavElement().getAttribute('class')).toContain(
+        'sn-scrolling-down'
+      );
+      expect(page.getNavElement().getAttribute('class')).not.toContain(
+        'sn-scrolling-up'
+      );
 
       page.scrollTo(0, 100);
-      expect(page.getNavElement().getAttribute('class')).not.toContain('sn-scrolling-down');
-      expect(page.getNavElement().getAttribute('class')).toContain('sn-scrolling-up');
+      expect(page.getNavElement().getAttribute('class')).not.toContain(
+        'sn-scrolling-down'
+      );
+      expect(page.getNavElement().getAttribute('class')).toContain(
+        'sn-scrolling-up'
+      );
     });
   });
 
   describe('minimise mode', () => {
     it('should add "sn-minimise" class', () => {
       page.scrollTo();
       page.scrollTo(0, 10);
-      expect(page.getNavElement().getAttribute('class')).not.toContain('sn-minimise');
+      expect(page.getNavElement().getAttribute('class')).not.toContain(
+        'sn-minimise'
+      );
 
       page.scrollTo(0, 110);
-      expect(page.getNavElement().getAttribute('class')).toContain('sn-minimise');
+      expect(page.getNavElement().getAttribute('class')).toContain(
+        'sn-minimise'
+      );
     });
   });
 
   describe('affix mode', () => {
     it('should add "sn-affix" class', () => {
       page.scrollTo();
       page.scrollTo(0, 10);
-      expect(page.getBarElement().getAttribute('class')).not.toContain('sn-affix');
+      expect(page.getBarElement().getAttribute('class')).not.toContain(
+        'sn-affix'
+      );
 
       page.scrollTo(0, 768 * 3);
       expect(page.getBarElement().getAttribute('class')).toContain('sn-affix');
     });
   });
-
 });

e2e/app.po.ts

@@ -17,4 +17,8 @@ export class AppPage {
   getBarElement() {
     return element(by.css('.bar'));
   }
+
+  getOffsetBarElement() {
+    return element(by.css('.bar--offset'));
+  }
 }

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.spec.ts

@@ -199,5 +199,42 @@ describe('ScrollCollapseDirective', () => {
       });
       expect(directive.affixMode).toBeFalsy();
     });
+
+    it('should factor in yOffset property when calculating affix mode', () => {
+      directive.originalHeight = 100;
+      directive.originalTop = 500;
+      directive.yOffset = 200;
+      directive.calculateAffixMode({
+        scrollX: 0,
+        scrollY: 0,
+        width: 1366,
+        height: 768
+      });
+      expect(directive.affixMode).toBeFalsy();
+
+      directive.calculateAffixMode({
+        scrollX: 0,
+        scrollY: 200,
+        width: 1366,
+        height: 768
+      });
+      expect(directive.affixMode).toBeFalsy();
+
+      directive.calculateAffixMode({
+        scrollX: 0,
+        scrollY: 300,
+        width: 1366,
+        height: 768
+      });
+      expect(directive.affixMode).toBeTruthy();
+
+      directive.calculateAffixMode({
+        scrollX: 0,
+        scrollY: 299,
+        width: 1366,
+        height: 768
+      });
+      expect(directive.affixMode).toBeFalsy();
+    });
   });
 });

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 sn-affix class 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
    *
@@ -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