@bitovi/sticky-nav

v0.0.11-pre.3

Published

a year ago

Just drop it in to enable quick navigation to sections of your page.

Downloads

sticky-nav

A web component for navigating to sections of your page that can stick as you scroll.

Setup

If you are using a module loader, you can install the web component with NPM like:

npm install @bitovi/sticky-nav

Import the web component:

import "../../node_modules/@bitovi/sticky-nav";

Use

To use, just insert the HTML element tag created by the package.

<sticky-nav></sticky-nav>

That's it.

Changing Default Configuration

You can optionally provide attributes to the component to customize your experience. Here are the default attribute values.

<sticky-nav 
    stick="true",
    scrollable-container-selector="window"
    heading-selector="h2"
></sticky-nav>

Attributes

stick

required: false
type: boolean
default: "true"

The stick attribute determines whether the sticky-nav-fixed class gets added to the element when you scroll passed it. This class defaults to having a fixed position style property. By default, it will assume the consuming application wants a sticky navbar.

<sticky-nav sticky="false"></sticky-nav>

scrollable-container-selector

required: false
type: string
default: "sticky-nav"

The scrollable-container-selector attribute is the tag (HTML element, class, or ID) contains the section headings that you want to scroll to. By default, it will be the window.

<sticky-nav scrollable-container-selector=".header"></sticky-nav>

heading-selector

required: false
type: string
default: "h2"

The heading-selector attribute is the tag (HTML element, class, or ID) that will be used to create the navbar items. By default, it will scour the <body> for H2 tags.

<sticky-nav heading-selector="h3"><sticky-nav>

Custom Styles

You can override or modify the default styles by using the provided IDs and classes. The component is structured like the following:

    <sticky-nav>
        <ul class="sticky-nav-inner">
            ...
            <ul class="sticky-nav-item">
                <a>Heading Example 1</a>
            </ul>
            ...
            <ul class="sticky-nav-item">
                <a>Heading Example 2</a>
            </ul>
            ...
        </div>
    </sticky-nav>

Navbar Wrapper

To customize the styles of the navbar container, use the following tag in your styles:

    sticky-nav {}

If you have not disabled the sticky attribute; a sticky-nav-fixed class will be added to the <sticky-nav> element as the user scrolls passed the menu. By default, the sticky-nav-fixed class adds a position: fixed; to the styles of the <sticky-nav> element.

If you want to customize this behavior, access the sticky-nav-fixed class on the <sticky-nav> element:

    sticky-nav.sticky-nav-fixed {}

Navbar Inner Container

To customize the styles of the navbar inner container (which is scrolled by the outer container), use the following ID in your styles:

    sticky-nav>ul {}

Navbar Items

To customize the styles of the navbar's items, use the following class in your styles:

    sticky-nav>ul>li {}

If you want to customize the active state of a nav item, use the following class in your styles:

    sticky-nav>ul>li.sticky-nav-active {}

The sticky-nav-active class is added whenever the section represented by the nav item is in or below the top 1/3 of the page and above of the next section in the page. The sticky-nav-active class will only be applied to one item at a time.

Notes

Using TypeScript + TSX

You may get the following linting error on the web component: Property 'sticky-nav' does not exist on type 'JSX.IntrinsicElements'. To fix this, add the following snippet to your declarations.d.ts file.

// In ~/declarations.d.ts

declare namespace JSX {
    // ...
  interface IntrinsicElements {
      // ...
    "sticky-nav": any;
  }
}