@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.

Versions

Current Tags

  • Version
    Downloads (Last 7 Days)
    • Tag
  • 1.1.1
    1
    • latest

Version History

  • Version
    Downloads (Last 7 Days)
    • Published
  • 1.1.1
    1
  • 1.1.0
    0

Package Sidebar

Install

npm i @hundh/scroll-toggle

Weekly Downloads

1

Version

1.1.1

License

MIT

Unpacked Size

424 kB

Total Files

10

Last publish

Collaborators

  • hundh