Neatly Positioned Magazines

    jetmovement

    0.0.2 • Public • Published

    JM

    NPM version NPM download David Status

    Jet Movement detects scrollUp and scrollDown movement for you.

    Introduction

    // when you scroll the page up it excutes the function `fn`
    jm.scrollUp(fn)
     
    // when you scroll the page down it excutes the function `fn`
    jm.scrollDown(fn)

    A real-world example

    Auto hiding website's Navbar when scroll down and show when scroll up, see it alive.

    HTML:

    <header class="header">
      <h1>Jet Movement</h1>
    </header>

    CSS:

    .header {
      height: 50px;
      background-color: #fff;
      border-bottom: 1px solid #e2e2e2;
      line-height: 50px;
      text-align: center;
      transform: translateY(0);
      transition: transform .3s ease;
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
    }
    .hidden-header {
      transform: translateY(-100%);
    }

    JavaScript:

    const header = document.querySelector('.header')
    jm.navbarHeight = header.clientHeight
     
    jm.scrollDown(() => {
      header.classList.add('hidden-header')
    })
     
    jm.scrollUp(() => {
      header.classList.remove('hidden-header')
    })

    Inspired by Hide header on scroll down, show on scroll up.

    License

    MIT.

    Keywords

    none

    Install

    npm i jetmovement

    DownloadsWeekly Downloads

    3

    Version

    0.0.2

    License

    MIT

    Last publish

    Collaborators

    • kchan