# Navigation Sticky 🍬

The Navigation Sticky component is a component that has the `position: sticky` css property set to it. Using this css property allows a navigational component to be static until scrolled to. When the browser scrolls to and then past the component, it becomes sticky.

## Props

The Navigation Sticky component initially uses a few props. It supports `children`; it uses render props.

### `Children`

This allows the Navigation Sticky element to contain Child Components making it easy to control while allowing designs to be maluable.

```javascript
<NavigationSticky name="foo">
  {({ name }) => <p>Test the {name}</p>}
</NavigationSticky>
```

### `Height`

The `height` prop is optional. The `height` prop sets the height of the Navigation Sticky component. This is most useful for Navigation Sticky component. See this [Codepen demo](https://codepen.io/yowainwright/pen/bPqaNK). With the `height` prop provided bottom Navigation Sticky component can be setup by providing 1 line of CSS! **Note:** HTML nesting skills maybe be required here.

```css
.some-css-class-example {
  position: sticky;
  top: calc(100vh - 5rem);
}
```

### `IsBottomVerticalPosition`

The `isBottomVerticalPosition` prop is optional. This prop, along with `height` help the Navigation Sticky component sit at the bottom of their parent containing element (See the `Height` prop and [Codepen demo](https://codepen.io/yowainwright/pen/bPqaNK) for more detail).

### `Name`

The `name` prop is required. This ensures that each Navigation Sticky component is unique. By providing a `name`, dynamic CSS classes and and id are generated.

```html
<NavigationSticky name="foo">

<!-- will generate the css class ui-nav-sticky--foo and id ui-nav-sticky--foo -->

```

### `OffsetTopPosition`

The `offsetTopPosition` prop is optional. This props defaults to 0 (`top: 0px`) but can be used to easily set a sticky top offset.

## TODO

Listed below are things to make this component more powerful if needed.

- **detect isSticky:** The `position: sticky` CSS property just works. However, it doesn't provide knowledge of whether a Navigation Sticky component is sticky or not. detecting this could be very beneficial. See [Stickybits](https://github.com/dollarshaveclub/stickybits) for more reference.
- **better bottom position calculation:** While the current implementation of the Navigation Sticky component provides bottom sticky position support. It could be more powerful. Making an update for this would/will require more research.

## Implementation

The Navigation Sticky component is a skeleton component. In order to leverage it's power, adding beauty via children (render props) is required. It could look a little like the example below.

```javascript
<NavigationSticky name="foo">
  {({ name }) => <NavigationAwesomeSauce name={name} />}
</NavigationSticky>
```

In the example above, `<NavigationAwesomeSauce />` can be it's own design wrapped by `<NavigationSticky />` to give it that sticky-icky goodness. 🍬