feat: add pin property

src/index.js

@@ -14,6 +14,7 @@ export default class Headroom extends Component {
     children: PropTypes.any.isRequired,
     disableInlineStyles: PropTypes.bool,
     disable: PropTypes.bool,
+    pin: PropTypes.bool,
     upTolerance: PropTypes.number,
     downTolerance: PropTypes.number,
     onPin: PropTypes.func,
@@ -30,6 +31,7 @@ export default class Headroom extends Component {
     parent: () => window,
     disableInlineStyles: false,
     disable: false,
+    pin: false,
     upTolerance: 5,
     downTolerance: 0,
     onPin: noop,
@@ -149,6 +151,10 @@ export default class Headroom extends Component {
           )
       }
     }
+
+    if (prevProps.pin !== this.props.pin) {
+      this.handleScroll()
+    }
   }
 
   componentWillUnmount() {
@@ -343,6 +349,7 @@ export default class Headroom extends Component {
     delete divProps.onUnfix
     delete divProps.disableInlineStyles
     delete divProps.disable
+    delete divProps.pin
     delete divProps.parent
     delete divProps.children
     delete divProps.upTolerance

src/shouldUpdate.js

@@ -14,6 +14,13 @@ export default function (
       scrollDirection,
       distanceScrolled,
     }
+    // We're pinned
+  } else if (props.pin) {
+    return {
+      action: state.state !== 'pinned' ? 'pin' : 'none',
+      scrollDirection,
+      distanceScrolled,
+    }
     // We're at the top and not fixed yet.
   } else if (currentScrollY <= props.pinStart && state.state !== 'unfixed') {
     return {

test/calc.js

@@ -9,6 +9,7 @@ describe('shouldUpdate', () => {
     propDefaults = {
       disableInlineStyles: false,
       disable: false,
+      pin: false,
       upTolerance: 0,
       downTolerance: 0,
       offset: 0,
@@ -217,4 +218,24 @@ describe('shouldUpdate', () => {
     const result = shouldUpdate(100, 110, propDefaults, state)
     expect(result.action).to.equal('unpin-snap')
   })
+
+  it("should return an action of 'pin' if props.pin is set and not pinned, yet", () => {
+    const state = {
+      height: 100,
+      state: 'something',
+    }
+
+    const result = shouldUpdate(100, 110, { ...propDefaults, pin: true }, state)
+    expect(result.action).to.equal('pin')
+  })
+
+  it("should return an action of 'none' if props.pin is set and already pinned", () => {
+    const state = {
+      height: 100,
+      state: 'pinned',
+    }
+
+    const result = shouldUpdate(100, 110, { ...propDefaults, pin: true }, state)
+    expect(result.action).to.equal('none')
+  })
 })

www/pages/index.md

@@ -72,6 +72,7 @@ Another option is to use CSS. The component has a `headroom` class as well as a
 *   `onUnfix` — callback called when header position is no longer fixed
 *   `upTolerance` — scroll tolerance in px when scrolling up before component is pinned
 *   `downTolerance` — scroll tolerance in px when scrolling down before component is pinned
+*   `pin` — pins the header so that it is always visible
 *   `disable` — disable pinning and unpinning
 *   `wrapperStyle` — pass styles for the wrapper div (this maintains the components vertical space at the top of the page).
 *   `parent` — provide a custom 'parent' element for scroll events. `parent` should be a function which resolves to the desired element.