kist-inviewport
Check if elements are in viewport.
Installation
npm install kist-inviewport --save bower install kist-inviewport --save
API
Following API description assumes you use this module as jQuery plugin.
$(Element).inViewport([options])
Returns: jQuery
options
Type: Integer|Object|String
Integer
Options defined as Type: Integer
Default: 0
Value in pixels which will signal plugin to check for element presence earlier in document.
Object
Options defined as Property | Type | Description | Default value |
---|---|---|---|
threshold |
Integer |
Value in pixels which will signal plugin to check for element presence earlier in document. | 0 |
debounce |
Integer |
Time in milliseconds which will be used to debounce callback execution. | 300 |
success |
Function |
Callback to execute if there are elements inside viewport. Provides jQuery elements in viewport as first argument. | $.noop |
once |
Function |
Callback to execute first time when there are elements inside viewport. Provides jQuery elements in viewport as first argument. | $.noop |
String
Options defined as destroy
Destroy plugin instance.
$.fn.inViewport.defaults
Type: Object
Change defaults for every plugin instance.
Examples
Returns every .block
element with 300px threshold.
;
Returns first .block
element with 100px threshold.
;
Callback when .block
elements with 300px threshold are in viewport.
;
Callback when .block
elements with 300px threshold are in viewport and debounce is 100ms.
;
Callback when first .block
element with 300px threshold is in viewport.
;
Callback when first .block
element with 300px threshold is in viewport and debounce is 100ms.
;
Destroy plugin instance.
;
AMD and global
; window$fninViewport;
Browser support
Tested in IE8+ and all modern browsers.
License
MIT © Ivan Nikolić