Merge pull request #23 from Lullabot/22-active-class

Adds activeClass property

Author: hankhsiao

README.md

@@ -51,7 +51,8 @@ var Sticky = require('react-stickynode');
 - `enabled {Boolean}` - The switch to enable or disable Sticky (true by default).
 - `top {Number/String}` - The offset from the top of window where the top of the element will be when sticky state is triggered (0 by default). If it is a selector to a target (via `querySelector()`), the offset will be the height of the target.
 - `bottomBoundary {Number/String}` - The offset from the top of document which release state will be triggered when the bottom of the element reaches at. If it is a selector to a target (via `querySelector()`), the offset will be the bottom of the target.
-- `enableTransforms {Boolean}` - Enable the use of CSS3 transforms (true by default)
+- `enableTransforms {Boolean}` - Enable the use of CSS3 transforms (true by default).
+- `activeClass {String}` - Class name to be applied to the element when the sticky state is active (`active` by default).
 
 ## Install & Development
 

src/Sticky.jsx

@@ -315,7 +315,7 @@ class Sticky extends Component {
         }
 
         return (
-            <div ref='outer' className={classNames('sticky-outer-wrapper', self.props.className)} style={outerStyle}>
+            <div ref='outer' className={classNames('sticky-outer-wrapper', self.props.className, {[self.props.activeClass]: self.state.status === STATUS_FIXED})} style={outerStyle}>
                 <div ref='inner' className='sticky-inner-wrapper' style={innerStyle}>
                     {self.props.children}
                 </div>
@@ -328,7 +328,8 @@ Sticky.defaultProps = {
     enabled: true,
     top: 0,
     bottomBoundary: 0,
-    enableTransforms: true
+    enableTransforms: true,
+    activeClass: 'active'
 };
 
 /**
@@ -349,7 +350,8 @@ Sticky.propTypes = {
         PropTypes.string,
         PropTypes.number
     ]),
-    enableTransforms: PropTypes.bool
+    enableTransforms: PropTypes.bool,
+    activeClass: PropTypes.string
 };
 
 module.exports = Sticky;

tests/unit/Sticky-test.js

@@ -137,10 +137,12 @@ describe('Sticky', function () {
         // Scroll down to 10px, and Sticky should fix
         window.scrollTo(0, 10);
         shouldBeFixedAt(inner, 0);
+        expect(outer.className).to.contain('active');
 
         // Scroll up to 0px, and Sticky should reset
         window.scrollTo(0, 0);
         shouldBeReset(inner);
+        expect(outer.className).to.not.contain('active');
     });
 
     it('should work as expected (long Sticky)', function () {
@@ -158,26 +160,32 @@ describe('Sticky', function () {
         // Scroll down to 10px, and Sticky should stay as it was
         window.scrollTo(0, 10);
         shouldBeReleasedAt(inner, 0);
+        expect(outer.className).to.not.contain('active');
 
         // Scroll down to 1500px, and Sticky should fix to the bottom
         window.scrollTo(0, 1500);
         shouldBeFixedAt(inner, -432);
+        expect(outer.className).to.contain('active');
 
         // Scroll up to 1300px, and Sticky should release
         window.scrollTo(0, 1300);
         shouldBeReleasedAt(inner, 1068);
+        expect(outer.className).to.not.contain('active');
 
         // Scroll down to 1350px, and Sticky should release as it was
         window.scrollTo(0, 1350);
         shouldBeReleasedAt(inner, 1068);
+        expect(outer.className).to.not.contain('active');
 
         // Scroll up to 10px, and Sticky should fix
         window.scrollTo(0, 10);
         shouldBeFixedAt(inner, 0);
+        expect(outer.className).to.contain('active');
 
         // Scroll down to 20px, and Sticky should release
         window.scrollTo(0, 20);
         shouldBeReleasedAt(inner, 10);
+        expect(outer.className).to.not.contain('active');
     });
 
     it('should work as expected with original postion 20px from top (short Sticky)', function () {
@@ -195,10 +203,12 @@ describe('Sticky', function () {
         // Scroll down to 10px, and Sticky should stay
         window.scrollTo(0, 10);
         shouldBeReset(inner);
+        expect(outer.className).to.not.contain('active');
 
         // Scroll down to 50px, and Sticky should fix
         window.scrollTo(0, 50);
         shouldBeFixedAt(inner, 0);
+        expect(outer.className).to.contain('active');
     });
 
     it('should work as expected with original top 20px and 400px bottom boundary (short Sticky)', function () {
@@ -218,14 +228,17 @@ describe('Sticky', function () {
         // Scroll down to 10px, and Sticky should stay
         window.scrollTo(0, 10);
         shouldBeReset(inner);
+        expect(outer.className).to.not.contain('active');
 
         // Scroll down to 50px, and Sticky should fix
         window.scrollTo(0, 50);
         shouldBeFixedAt(inner, 0);
+        expect(outer.className).to.contain('active');
 
         // Scroll down to 150px, and Sticky should release
         window.scrollTo(0, 150);
         shouldBeReleasedAt(inner, 80);
+        expect(outer.className).to.not.contain('active');
     });
 
     it('should not be sticky if bottom boundary is shorter then its height (short Sticky)', function () {
@@ -244,11 +257,13 @@ describe('Sticky', function () {
         // Scroll down to 10px, and Sticky should stay
         window.scrollTo(0, 10);
         shouldBeReset(inner);
+        expect(outer.className).to.not.contain('active');
 
         // Micic status was not 0 (STATUS_ORIGINAL), scroll down to 20px, and Sticky should stay
         sticky.state.status = 2; // STATUS_FIXED;
         window.scrollTo(0, 20);
         shouldBeReset(inner);
+        expect(outer.className).to.not.contain('active');
     });
 
     it('should work as expected with selector bottom boundary (short Sticky)', function () {
@@ -268,14 +283,17 @@ describe('Sticky', function () {
         // Scroll down to 10px, and Sticky should fix
         window.scrollTo(0, 10);
         shouldBeFixedAt(inner, 20);
+        expect(outer.className).to.contain('active');
 
         // Scroll down to 50px, and Sticky should fix
         window.scrollTo(0, 50);
         shouldBeFixedAt(inner, 20);
+        expect(outer.className).to.contain('active');
 
         // Scroll down to 150px, and Sticky should release
         window.scrollTo(0, 150);
         shouldBeReleasedAt(inner, 100);
+        expect(outer.className).to.not.contain('active');
     });
 
     it('should stick to the top when window resizes larger then Sticky (long Sticky)', function () {
@@ -293,8 +311,10 @@ describe('Sticky', function () {
         // Scroll down to 10px, and Sticky should fix
         window.scrollTo(0, 10);
         shouldBeReleasedAt(inner, 0);
+        expect(outer.className).to.not.contain('active');
 
         window.resizeTo(0, 900);
         shouldBeFixedAt(inner, 0);
+        expect(outer.className).to.contain('active');
     });
 });