konstruct-sensor v0.2.0

Konstruct Sensor 0.2.0

A tiny CommonJS Jquery script that allows you to perform actions based on your scroll position in percentages.

Install

First install the script as a dependency with NPM:

npm install --save konstruct-sensor

Then require sensor in your script:

var Sensor = require('konstruct-sensor')

Call the Sensor(); function with parameters (see below).

Usage

Sensor works by passing it objects to listen and act on. There are two main actions you can perform at the moment:

sensor([
  false, // Turn debug mode on/off
  false, // Throttle the listener (performance)
  {} // Action Objects
]);

Actions

There are currently two types of actions you can run through Sensor:

• Class
• Width Runner
• Height Runner

Class

The class action matches the scroll position to a point you define, and then adds or removes a class on your element.

sensor([
  false, // Turn debug mode on/off
  false, // Throttle the listener (performance)
  {
    name: 'class',
    element: '.f-header',
    modifier: 'f-header--fixed', // Single element, or an array of two classes in which case it will toggle between them.
    at: 20, // 0-100
    operator: '>=' // '<=, '>=', '==='
  }
]);

In the above example, Sensor will add f-header--fixed to <header class="f-header"></header when you have scrolled more than 20% down the page, and remove it when you scroll back to the top.

Width Runner

The width runner returns the current scroll position in percentage, and changes the width of an element.

sensor([
  false, // Turn debug mode on/off
  false, // Throttle the listener (performance)
  {
    name: 'width-runner',
    element: '.p-reader'
  }
]);

In the above example, Sensor will set the width of .p-reader by the value of the scroll position, ie, it will grow bigger as you scroll down and smaller as you scroll up.

Height Runner

The height runner returns the current scroll position in percentage, and changes the height of an element.

sensor([
  false, // Turn debug mode on/off
  false, // Throttle the listener (performance)
  {
    name: 'height-runner',
    element: '.p-reader'
  }
]);

In the above example, Sensor will set the height of .p-reader by the value of the scroll position, ie, it will grow bigger as you scroll down and smaller as you scroll up.