.eslintrc

@@ -1,13 +1,13 @@
 {
   "parserOptions": {
-    "ecmaVersion": 6,
+    "ecmaVersion": 2018,
     "sourceType": "module"
   },
   "env": {
     "browser": true,
     "node": true
   },
-  "extends": "eslint:recommended",
+  "extends": ["eslint:recommended"],
   "rules": {
     "no-unused-expressions": "error",
     "no-bitwise": "error",

cypress/.eslintrc

@@ -0,0 +1,3 @@
+{
+  "extends": ["plugin:cypress/recommended"]
+}

cypress/integration/headroom.spec.js

@@ -6,7 +6,7 @@ describe("Headroom", function() {
       win.hr = new win.Headroom(win.document.querySelector("header"), options);
       win.hr.init();
     });
-    cy.wait(200);
+    cy.wait(200); // eslint-disable-line cypress/no-unnecessary-waiting
   };
 
   beforeEach(() => {
@@ -241,6 +241,7 @@ describe("Headroom", function() {
       }
     });
 
+    // eslint-disable-next-line cypress/no-unnecessary-waiting
     cy.wait(0).should(() => {
       expect(topStatus).to.equal("top");
       expect(pinStatus).to.equal(undefined);
@@ -287,7 +288,7 @@ describe("Headroom", function() {
 
       cy.window().then(win => {
         expect(win.hr.classes).to.deep.contain(classes);
-        const { initial, pinned, ...defaultClasses } = win.hr.classes;
+        const { initial, pinned, ...defaultClasses } = win.hr.classes; // eslint-disable-line no-unused-vars
         expect(win.hr.classes).to.deep.contain(defaultClasses);
       });
     });
@@ -307,5 +308,24 @@ describe("Headroom", function() {
         expect(win.hr.classes).to.deep.equal(win.Headroom.options.classes);
       });
     });
+
+    it("handles multiple classes", () => {
+      initialiseHeadroom({
+        classes: {
+          pinned: "headroom--pinned foo",
+          unpinned: "headroom--unpinned bar"
+        }
+      });
+
+      cy.scrollTo(0, 50);
+      cy.get("header")
+        .should("not.be.pinned")
+        .should("have.class", "bar");
+
+      cy.scrollTo(0, 25);
+      cy.get("header")
+        .should("be.pinned")
+        .should("have.class", "foo");
+    });
   });
 });

cypress/plugins/index.js

@@ -11,7 +11,7 @@
 // This function is called when a project is opened or re-opened (e.g. due to
 // the project's config changing)
 
-module.exports = (on, config) => {
+module.exports = (/*on, config*/) => {
   // `on` is used to hook into various events Cypress emits
   // `config` is the resolved Cypress config
-}
+};

package.json

@@ -1,6 +1,6 @@
 {
   "name": "headroom.js",
-  "version": "0.10.4",
+  "version": "0.11.0",
   "description": "Give your page some headroom. Hide your header until you need it",
   "main": "dist/headroom.js",
   "files": [
@@ -31,6 +31,8 @@
   },
   "devDependencies": {
     "cypress": "^3.4.1",
+    "eslint": "^6.5.0",
+    "eslint-plugin-cypress": "^2.7.0",
     "rollup": "^1.19.4",
     "rollup-plugin-eslint": "^7.0.0",
     "rollup-plugin-filesize": "^6.2.0",

src/.eslintrc

@@ -0,0 +1,8 @@
+{
+  "parserOptions": {
+    "ecmaVersion": 6
+  },
+  "env": {
+    "browser": true
+  }
+}

src/Headroom.js

@@ -168,15 +168,23 @@ Headroom.prototype = {
   },
 
   addClass: function(className) {
-    this.elem.classList.add(this.classes[className]);
+    this.elem.classList.add.apply(
+      this.elem.classList,
+      this.classes[className].split(" ")
+    );
   },
 
   removeClass: function(className) {
-    this.elem.classList.remove(this.classes[className]);
+    this.elem.classList.remove.apply(
+      this.elem.classList,
+      this.classes[className].split(" ")
+    );
   },
 
   hasClass: function(className) {
-    return this.elem.classList.contains(this.classes[className]);
+    return this.classes[className].split(" ").every(function(cls) {
+      return this.classList.contains(cls);
+    }, this.elem);
   },
 
   update: function(details) {