https://github.com/waitingwittykitty/react-sticky-navbar
Enhance your website with our customizable React navbar. Enjoy the convenience of a sticky feature for seamless navigation.
https://github.com/waitingwittykitty/react-sticky-navbar
mouse navbar react scroll sticky wheel
Last synced: 2 months ago
JSON representation
Enhance your website with our customizable React navbar. Enjoy the convenience of a sticky feature for seamless navigation.
- Host: GitHub
- URL: https://github.com/waitingwittykitty/react-sticky-navbar
- Owner: waitingwittykitty
- Created: 2023-11-06T13:42:26.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2023-11-17T11:53:44.000Z (over 1 year ago)
- Last Synced: 2025-03-08T15:28:53.762Z (2 months ago)
- Topics: mouse, navbar, react, scroll, sticky, wheel
- Language: TypeScript
- Homepage: https://react-sticky-navbar-demo.vercel.app
- Size: 5.89 MB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
README
# React Sticky Navbar
StickyNavbar is a React component that provides a customizable sticky navigation bar for websites. It allows for smooth scrolling and dynamic behavior based on the user's scroll position.
[Demo](https://react-sticky-navbar-demo.vercel.app/)
## Installation
To install StickyNavbar, use npm or yarn:
```bash
npm install react-sticky-navbar
# or
yarn add react-sticky-navbar
```
## Usage
```jsx
import React from "react";
import StickyNavbar from "react-sticky-navbar";
const App = () => {
return (
{/* Navigation links or other content */}
{/* Your other components */}
);
};
export default App;
```
StickyNavbar takes various props to customize its behavior, including `showOnTop`, `showOnScrollDown`, `showOnScrollUp`, `zIndex`, `duration`, and `stickyBackground`. You can also pass `classNames` to customize the CSS classes for different scroll positions.
## Props
- `children`: React nodes to be rendered inside the sticky navbar.
- `classNames`: Custom CSS class names for different scroll positions.
- `scrollTop`: Custom CSS class name for the navbar when the user is at the top of the page.
- `scrollMiddle`: Custom CSS class name for the navbar when the user is at the middle of the page.
- `scrollBottom`: Custom CSS class name for the navbar when the user is at the bottom of the page.
- `scrollUp`: Custom CSS class name for the navbar when the user scrolled up the page.
- `scrollDown`: Custom CSS class name for the navbar when the user scrolled down the page.
- `showOnTop`: Whether to show the navbar when the user is at the top of the page.
- `showOnBottom`: Whether to show the navbar when the user is at the bottom of the page.
- `showOnScrollDown`: Whether to show the navbar when the user is scrolling down.
- `showOnScrollUp`: Whether to show the navbar when the user is scrolling up.
- `zIndex`: The z-index of the navbar.
- `duration`: Transition duration in milliseconds.
- `stickyBackground`: Background color of the sticky navbar.
## Contributing
Contributions are welcome! If you'd like to contribute to this project, feel free to fork the repository and submit a pull request with your changes.
## Support
For support, please open an issue on the GitHub repository.