Skip to content

Latest commit

 

History

History
59 lines (40 loc) · 1.53 KB

README.md

File metadata and controls

59 lines (40 loc) · 1.53 KB
Raw

Scroll Detective

A minimal JavaScript module for manipulating DOM Elements when scrolling up, down or after scrolling stops.

Installation

npm install scroll_detective --save

Furthermore jQuery or a similar library is required that supports the methods on(), off(), trigger() and querying selectors like jQuery.

Usage

HTML:

<div class="hide_on_scroll_down">Hidden when you scroll down.</div>
<div class="hide_on_scroll_up">Hidden when you scroll up.</div>

CSS:

.hide_on_scroll_up, .hide_on_scroll_down{
	opacity:1;
}

.hidden{
	opacity:0;
}

.hide_on_scroll_down.hidden{
	top:-50px;
}

JS:

var scroll_detective = ScrollDetective($);

Documentation

Supported CSS classes:

  • hide_on_scroll_down : The CSS class hidden will be added as soon as the user scrolls down.
  • hide_on_scroll_up : The CSS class hidden will be added as soon as the user scrolls up.
  • hide_on_scroll_stop : The CSS class hidden will be added after the user stops scrolling.

Events:

  • scroll_hide : Triggered by each element when it's being hidden.
  • scroll_show : Triggered by each element when it's being shown.

Methods:

  • setEnabled(boolean) : Set the enabled state.
  • enable() : Convenience method for setEnabled(true).
  • disable() : Convenience method for setEnabled(false).

Todo:

  • Add Options to documentation
  • Enable hiding without css classes
  • Enable timeout for scroll_stop again after disabling.

Release History

  • 0.1.0 Initial release