Wondering what’s next for npm?Check out our public roadmap! »

    @hundh/scroll-toggle

    1.1.1 • Public • Published

    Scroll-Toggle

    Simple javascript plugin to toggle elements on scroll. The styling to hide and show elements must be done by yourself.

    demo

    Usage

    Require the plugin itself.

    require('ScrollToggle');

    By default the plugin listens on elements with the .scroll-toggle css class.

    <div class="nav-quick scroll-toggle" data-offset="#header" data-body-class="nav-quick-hidden" data-init-show="true">
    </div>
    

    In order to hide elements, you can use the following scss snippet and customize for your needs:

    .scroll-toggle {
      transition: transform 250ms linear;
      transform: translateY(0);
      &.scroll-hide {
        transform: translateY(100%);
      }
    }
    

    Additional Attributes

    Attributes Description
    data-offset Set a minimum offset to start hide element (body scrollTop), can also be an valid CSS-Selector like #header
    data-body-class Define a custom CSS class that should be toggled on body element on hide/show element.
    data-init-show Set to false if you want to hide the element initially, if offset is below body scrollTop on load.

    Keywords

    none

    Install

    npm i @hundh/scroll-toggle

    DownloadsWeekly Downloads

    4

    Version

    1.1.1

    License

    MIT

    Unpacked Size

    424 kB

    Total Files

    10

    Last publish

    Collaborators

    • avatar