Nine Parsecs from Milwaukee

    @bitovi/sticky-nav

    0.0.11-pre.3 • Public • Published

    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;
      }
    }

    Install

    npm i @bitovi/sticky-nav

    DownloadsWeekly Downloads

    2

    Version

    0.0.11-pre.3

    License

    MIT

    Unpacked Size

    21.2 kB

    Total Files

    4

    Last publish

    Collaborators

    • bitovi-os
    • bitovi-core-os
    • mickmcgrath13
    • phillipskevin
    • tehfedaykin
    • rlmcneary2
    • mhaynie_bitovi
    • fabioemoutinho
    • christopherjbaker
    • justinbmeyer
    • cherif_b
    • connorg
    • jazzy_michael
    • alishouman