Top React.js Sticky Components Examples

1. React Stickies

Sticky Notes for React Application (DraftJS Based)

Features

• Pure React Sticky Notes
• Draggable & Resizable Stickies
• Inline Content Editable
• Configurable Sticky Colors
• Last Updated TimeStamp
• Configurable Tape

Demo : https://ajainvivek.github.io/react-stickies/

View on Github

2. Stickyroll

Stickyroll is the successor of react-over-scroll. This project is maintained as a monorepo via lerna.

Stickyroll translates page scroll to paging and a progress timeline. The view uses position: sticky to remain in-view.

View demo: https://stickyroll.netlify.com/#!/themes/7

View on github

3. React Stickynode

A performant and comprehensive React sticky component.

Features

• Retrieve scrollTop only once for all sticky components.
• Listen to throttled scrolling to have better performance.
• Use rAF to update sticky status to have better performance.
• Support top offset from the top of screen.
• Support bottom boundary to stop sticky status.
• Support any sticky target with various width units.

View on github

4. Synopsis

StickyNode is a React component which always will be inside a specified container. It can be usefull for a tooltips, etc.

View on Github

5. React Sticky State

The React Sticky[State] Component makes native position:sticky statefull and polyfills the missing sticky browser feature.

View on github

6. React Listview Sticky Header

React listview with sticky section header.

View demo : https://cht8687.github.io/react-listview-sticky-header/example/

View on github

7. React Headroom

React Headroom is a React Component to hide/show your header on scroll. The header on this site is a living example. When you scroll down, it slides out of view and slides back in when scrolling up.

View on Github

8. React Sticky

Make your React components sticky!

View on Github

Thank for Read!!

#reactjs #javascript