This package has been deprecated
WARNING: This project has been renamed to react-sticky-nav. Install using react-sticky-nav instead.
An App Bar for React that stays out of your way.
When the scrolling is just right
Also known as a Header, a Navigation Bar, or a Navbar. I chose App Bar because it was available on npm.npm · GitLab
- Something to style the
<AppBar />with, like styled-components or emotion
window.requestAnimationFrame. You could use a polyfill for older browsers
position: sticky;support. For Safari, you should add
position: -webkit-sticky;to your own styles. Unfortunately this is not possible to support with React's inline style syntax.
// @jsx jsximport React from "react";import css jsx from "@emotion/core";import Navigation from "app-bar";import HamburgerMenu Logo from "./components";...const styles = css`background-color: white;box-shadow: ;height: 64px;position: -webkit-sticky /* This is needed for Safari support */`;...ReactDOM;
<AppBar />'s current position (hidden, pinned, or unfixed) in its children, you can supply
<AppBar / a render function as its child:
const SizableLogo =height: propslarge ? "128px" : "64px";ReactDOM;
app-bar comes with very little defaults, and should be styled by supplying it with a
className property that is attached some CSS.
<AppBar /> component is a
<nav /> element with the following inline styles:
In other words,
<AppBar /> is a fixed full-width element that sticks to the top of your screen. The only functionality is that
<AppBar /> will move out the viewport when scrolling down, and back in when scrolling up. This is done by controlling the
top CSS property.
There are three additional classes added for the different states possible:
unfixedis applied when
<AppBar />doesn't touch the top of the screen but is on the page
hiddenis applied when
<AppBar />is fully hidden (for example, after scrolling down or reloading page when scrolled)
pinnedis applied when
<AppBar />scrolling up from being hidden These classes can be used for styling (see demo for example).
If you want to disable
<AppBar />'s behaviour, supply the
disabled prop. When disabled,
<AppBar /> will simply stick to the top of the screen.
If you need to access the dom element, you can supply your own ref from
React.createRef via the
ref?: React.Ref<HTMLDivElement> prop.