https://github.com/robbestad/react-stickydiv

React Component which keeps any HTML element sticky whenever it is scrolled beyond view
https://github.com/robbestad/react-stickydiv

Last synced: 20 days ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/robbestad/react-stickydiv
• Owner: robbestad
• License: isc
• Created: 2014-10-11T21:25:03.000Z (about 10 years ago)
• Default Branch: master
• Last Pushed: 2017-09-28T09:40:12.000Z (about 7 years ago)
• Last Synced: 2024-04-14T18:03:39.739Z (8 months ago)
• Language: JavaScript
• Homepage:
• Size: 89.8 KB
• Stars: 59
• Watchers: 3
• Forks: 19
• Open Issues: 9
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Sticky Div

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

Demo at [http://learnreact.robbestad.com/#/stickydiv][2]

## 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 (

           

           	 I'm Sticky

           

        );

      }

    });

#### Without JSX

      var MyComponent = React.createClass({

          render: function() {

              return React.createElement(StickyDiv, null, React.createElement("div", null, "I'm Sticky"));

          }

      });

[1]: https://facebook.github.io/react

[2]: http://learnreact.robbestad.com/#/stickydiv

[3]: https://github.com/svenanders/react-stickydiv/issues/1

[4]: https://gist.github.com/z5h/d95304d8d8e1fb6d0619