Skip to content

React Component which keeps any HTML element sticky whenever it is scrolled beyond view

License

Notifications You must be signed in to change notification settings

robbestad/react-stickydiv

Repository files navigation

Sticky Div

React Component that sets a div (or any HTML element) sticky when it's scrolled beyond view.

Demo at http://learnreact.robbestad.com/#/stickydiv

Installation

% npm install react-stickydiv --save

A note about index.js

The compiled version of the script is automatically created by running:

make jsx

There's no need to update this manually.

Usage

Options

  • {int} offsetTop - The offset from the top of the page, optional; default: 0
  • {int} zIndex - The zIndex for the sticky element, optional; default: 999
  • {function} onFixedChange - Function called on change on sticky state, optional;
  • {string} className - A className (or names) for the sticky element, optional; default: ''

With JSX

var StickyDiv = require('react-stickydiv');

MyComponent = React.createClass({
  render: function() {
     return (
       <StickyDiv>
       	 I'm Sticky
       </StickyDiv>
    );
  }
});

Without JSX

  var MyComponent = React.createClass({
      render: function() {
          return React.createElement(StickyDiv, null, React.createElement("div", null, "I'm Sticky"));
      }
  });

About

React Component which keeps any HTML element sticky whenever it is scrolled beyond view

Resources

License

Stars

Watchers

Forks

Packages

No packages published