cypress/integration/headroom.spec.js

@@ -88,13 +88,19 @@ describe("Headroom", function() {
     });
 
     cy.scrollTo(0, 25);
-    cy.get("header").should("be.initialised");
+    cy.get("header")
+      .should("be.initialised")
+      .should("be.top");
 
     cy.scrollTo(0, 55);
-    cy.get("header").should("not.be.pinned");
+    cy.get("header")
+      .should("not.be.pinned")
+      .should("not.be.top");
 
     cy.scrollTo(0, 49);
-    cy.get("header").should("be.pinned");
+    cy.get("header")
+      .should("be.pinned")
+      .should("be.top");
   });
 
   it("can be frozen / unfrozen", () => {

package.json

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

src/Headroom.js

@@ -41,6 +41,7 @@ Headroom.prototype = {
         function(self) {
           self.scrollTracker = trackScroll(
             self.scroller,
+            { offset: self.offset, tolerance: self.tolerance },
             self.update.bind(self)
           );
         },
@@ -154,18 +155,16 @@ Headroom.prototype = {
     }
   },
 
-  shouldUnpin: function(scrollY, lastScrollY, toleranceExceeded) {
-    var scrollingDown = scrollY > lastScrollY;
-    var pastOffset = scrollY >= this.offset;
+  shouldUnpin: function(details) {
+    var scrollingDown = details.direction === "down";
 
-    return scrollingDown && pastOffset && toleranceExceeded;
+    return scrollingDown && !details.top && details.toleranceExceeded;
   },
 
-  shouldPin: function(scrollY, lastScrollY, toleranceExceeded) {
-    var scrollingUp = scrollY < lastScrollY;
-    var pastOffset = scrollY <= this.offset;
+  shouldPin: function(details) {
+    var scrollingUp = details.direction === "up";
 
-    return (scrollingUp && toleranceExceeded) || pastOffset;
+    return (scrollingUp && details.toleranceExceeded) || details.top;
   },
 
   addClass: function(className) {
@@ -181,9 +180,6 @@ Headroom.prototype = {
   },
 
   update: function(details) {
-    var toleranceExceeded =
-      details.distance > this.tolerance[details.direction];
-
     if (details.isOutOfBounds) {
       // Ignore bouncy scrolling in OSX
       return;
@@ -205,13 +201,9 @@ Headroom.prototype = {
       this.notBottom();
     }
 
-    if (
-      this.shouldUnpin(details.scrollY, details.lastScrollY, toleranceExceeded)
-    ) {
+    if (this.shouldUnpin(details)) {
       this.unpin();
-    } else if (
-      this.shouldPin(details.scrollY, details.lastScrollY, toleranceExceeded)
-    ) {
+    } else if (this.shouldPin(details)) {
       this.pin();
     }
   }

src/trackScroll.js

@@ -4,7 +4,7 @@ import { passiveEventsSupported } from "./features";
 /**
  * @param element EventTarget
  */
-export default function trackScroll(element, callback) {
+export default function trackScroll(element, options, callback) {
   var isPassiveSupported = passiveEventsSupported();
   var rafId;
   var scrolled = false;
@@ -13,7 +13,7 @@ export default function trackScroll(element, callback) {
   var details = {};
 
   function update() {
-    var scrollY = scroller.scrollY();
+    var scrollY = Math.round(scroller.scrollY());
     var height = scroller.height();
     var scrollHeight = scroller.scrollHeight();
 
@@ -23,8 +23,10 @@ export default function trackScroll(element, callback) {
     details.direction = scrollY > lastScrollY ? "down" : "up";
     details.distance = Math.abs(scrollY - lastScrollY);
     details.isOutOfBounds = scrollY < 0 || scrollY + height > scrollHeight;
-    details.top = scrollY <= 0;
+    details.top = scrollY <= options.offset;
     details.bottom = scrollY + height >= scrollHeight;
+    details.toleranceExceeded =
+      details.distance > options.tolerance[details.direction];
 
     callback(details);