React Sticky Header | Sticky Navbar for React

A sticky nav bar library for React-powered web applications.

How to use it:

1. Import the sticky nav component.

import React from ‘react’
import { StickyNav } from ‘react-js-stickynav’
import ‘react-js-stickynav/dist/index.css’

2. Create a sticky nav bar for your app.

const App = () => {
  const style = () => {
    return (
      <style jsx>{`
        .nav {
          transition: all 0.1s linear;
          position: fixed;
          z-index: 2000;
          padding: 20px;
        }
        .scrollNav {
          transition: all 0.5s ease-in;
          z-index: 2000;
          background: #ffffff;
          width: 100%;
          border-bottom: 1px solid #dddddd;
        }
        .styl {
          padding-top: 80px;
        }
      `}</style>
    )
  }
  return (
    <div>
      {style()}
      <StickyNav length='40'>Your Nav here</StickyNav>
      <div className='styl'>
        Your content Here
      </div>
    </div>
  )
}
export default

Preview:

Download Details:

Author: abodmicheal

Live Demo: View The Demo

Download Link: Download The Source Code

Official Website: https://github.com/abodmicheal/react-js-stickynav

License: MIT

#react #reactjs