react-stickky

make anything sticky with this react component

Usage no npm install needed!

<script type="module">
  import reactStickky from 'https://cdn.skypack.dev/react-stickky';
</script>

README

React-Stickky

Build Status

A simple React sticky component

Live Demo

Description

Wrap any code within and pass css styles

<Sticky>
   <h1>Now I'm sticky</h1>
</Sticky>

and it will be sticky

To make it sticky at the Top of the page

.stickyStyle {
  backgroundColor: '#FFF',
  top: '0'
}

<Sticky className="stickyStyle">
   This is a React component!
</Sticky>

To make it sticky at the Bottom of the page

.stickyStyle {
  backgroundColor: '#FFF',
  bottom: '0'
}

<Sticky className="stickyStyle">
   This is a React component!
</Sticky>

Using other optional properties

<Sticky
     className={style}
     scrollIndex={100}
     stickyWidth="100%"
>
</Sticky>

Propterties are optional

  • className - Any CSS styles needed to pass down to child components
  • scrollIndex - @scrollIndex y=100 the stickyness will apply to the wrapped component
  • stickyWidth - Takes width if passed or defaults to 100%