react-simple-affix

React Affix

React Affix is a component that sticks to the viewport when scrolling until it reaches its relative element bottom point.

Installation

npm i react-simple-affix

Usage

import Affix from 'react-simple-affix'

<Affix fixedNavbarSelector="#my-navbar" relativeElementSelector="#main-content">
  <ul>
    <li><a href="/home">Home</a></li>
    <li><a href="/about">About</a></li>
    <li><a href="/about">Contact</a></li>
  </ul>
  ...
</Affix>

Demo

• Webpage with affix
• Code sample - codesandbox.io

Props

Name	Required	Type	Description
enabled	optional	boolean	enable/disable affix
relativeElementSelector	optional	string	selector of an element that would determine the floating stop point of affix. Default: Parent Element
fixedNavbarSelector	optional	string	selector of fixed navbar element; Affix will avoid to overlap it. (only applicable for fixed navbar)
fixedFooterSelector	optional	string	selector of fixed footer element; Affix will avoid to overlap it. (only applicable for fixed footer)
topOffset	optional	number	top offset of affix from viewport. Default: 15
bottomOffset	optional	number	bottom offset of affix from viewport. Default: 15
inheritParentWidth	optional	boolean	should affix follow the width of parent when its position is fixed. Default: true

Determining Relative Element

Relative element's height serves as the reference of affix to determine when it will stop floating.

Example: if you have a main and side div, you can make the main div as the relative element...
with this setup, affix would follow the height of main and will stop floating if the end of main div is reached