cypress/integration/headroom.spec.js

@@ -106,6 +106,35 @@ describe("Headroom", function() {
       .should("be.top");
   });
 
+  it("handles up/down offset correctly", () => {
+    initialiseHeadroom({
+      offset: {
+        up: 70,
+        down: 120,
+      }
+    });
+
+    cy.scrollTo(0, 119);
+    cy.get("header")
+      .should("be.initialised")
+      .should("be.top");
+
+    cy.scrollTo(0, 140);
+    cy.get("header")
+      .should("not.be.pinned")
+      .should("not.be.top");
+
+    cy.scrollTo(0, 121);
+    cy.get("header")
+      .should("be.pinned")
+      .should("not.be.top");
+
+    cy.scrollTo(0, 69);
+    cy.get("header")
+      .should("be.pinned")
+      .should("be.top");
+  });
+
   it("can be frozen / unfrozen", () => {
     initialiseHeadroom();
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "headroom.js",
-  "version": "0.11.0",
+  "version": "0.12.0",
   "description": "Give your page some headroom. Hide your header until you need it",
   "main": "dist/headroom.js",
   "files": [

src/Headroom.js

@@ -1,7 +1,7 @@
 import { isBrowser, isSupported } from "./features";
 import trackScroll from "./trackScroll";
 
-function normalizeTolerance(t) {
+function normalizeUpDown(t) {
   return t === Object(t) ? t : { down: t, up: t };
 }
 
@@ -19,7 +19,8 @@ function Headroom(elem, options) {
   this.classes = Object.assign({}, Headroom.options.classes, options.classes);
 
   this.elem = elem;
-  this.tolerance = normalizeTolerance(this.tolerance);
+  this.tolerance = normalizeUpDown(this.tolerance);
+  this.offset = normalizeUpDown(this.offset);
   this.initialised = false;
   this.frozen = false;
 }

src/trackScroll.js

@@ -23,7 +23,7 @@ export default function trackScroll(element, options, callback) {
     details.direction = scrollY > lastScrollY ? "down" : "up";
     details.distance = Math.abs(scrollY - lastScrollY);
     details.isOutOfBounds = scrollY < 0 || scrollY + height > scrollHeight;
-    details.top = scrollY <= options.offset;
+    details.top = scrollY <= options.offset[details.direction];
     details.bottom = scrollY + height >= scrollHeight;
     details.toleranceExceeded =
       details.distance > options.tolerance[details.direction];