@mangoweb/hiding-header
    TypeScript icon, indicating that this package has built-in type declarations

    0.0.6 • Public • Published

    Hiding Header

    The manGoweb HidingHeader component. Hides and reveals header on scroll.

    Installation

    $ npm install @mangoweb/hiding-header @mangoweb/scripts-base

    This is a @mangoweb/scripts-base component.

    How to use

    In your template:

    <body>
        <div class="hidingHeader" id="hidingHeader">
            <div class="hidingHeader-in">
                <!-- Your header -->
            </div>
        </div>
        <script>
            window.initComponents = (window.initComponents || []).push({
                name: 'HidingHeader',
                place: '#hidingHeader',
            })
        </script> 
        …
    </body>

    Styles:

    .hidingHeader {
        position: relative;
        --hidingHeader-height: auto;
        --hidingHeader-bounds-height: auto;
        z-index: 10;
        height: var(--hidingHeader-bounds-height);
        margin-bottom: calc(var(--hidingHeader-height) - var(--hidingHeader-bounds-height));
        pointer-events: none;
    }
     
    .hidingHeader-in {
        position: relative;
        position: sticky;
        top: 0;
        pointer-events: auto;
    }

    Keywords

    none

    Install

    npm i @mangoweb/hiding-header

    DownloadsWeekly Downloads

    7

    Version

    0.0.6

    License

    MIT

    Unpacked Size

    4 kB

    Total Files

    9

    Last publish

    Collaborators

    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar