Adds activeClass property

Author: fender

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

@@ -312,7 +312,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>
@@ -325,7 +325,8 @@ Sticky.defaultProps = {
     enabled: true,
     top: 0,
     bottomBoundary: 0,
-    enableTransforms: true
+    enableTransforms: true,
+    activeClass: 'active'
 };
 
 /**
@@ -346,7 +347,8 @@ Sticky.propTypes = {
         PropTypes.string,
         PropTypes.number
     ]),
-    enableTransforms: PropTypes.bool
+    enableTransforms: PropTypes.bool,
+    activeClass: PropTypes.string
 };
 
 module.exports = Sticky;