It detects if a DOM element is inside the viewport height on window scroll.
jqueryOnScrollPosition is a jquery plugin that, during window scrorll, simply get the top and bottom positions of a DOM element,
get its height and check if the element body is visible on screen.
This plugin works with callbacks system returning an object (with some boolean results) that will passed, as parameter, to the callback functions.
jqueryOnScrollPosition can accept 3 different callbacks that you can use as you need.
See more about function callbacks usage on documentation.
| Option Name | Type | Default | Description |
|---|---|---|---|
| activeOnStart | BOOL | true | if "false", it prevents callbacks execution on plugin init (before window scroll) |
| triggersOffset | Array | [0,0] | window offset from top and bottom |
| elementOffset | Number | 0 | element offset from top |
| callbackOnScroll | Function | none | callback function launched each time when window is on scroll |
| callbackOnTrue | Function | none | callback fucntion launched only when element is inside the viewport height |
| callbackOnFalse | Function | none | callback fucntion launched only when element is outside the viewport height |
The object passed to the callback function, called results, contains the same boolean values:
| Key | Type | Value | Description |
|---|---|---|---|
| isOnScreen | BOOL | true / false | this value indicates if the element is inside the viewport height |
| elementTopIsOnScreen | BOOL | true / false | this value indicates if the element top is inside the viewport height |
| elementBottomIsOnScreen | BOOL | true / false | this value indicates if the element bottom is inside the viewport height |
| isOutOnTop | BOOL | true / false | when the element is outside the viewport height this value indicates if the element is located above the window top. |
| isOutOnTop | BOOL | true / false | when the element is outside the viewport height this value indicates if the element is located below the window bottom. |
Using this function is very simple.
Assuming that you have an element, called '#elementOne', and you want have a console log when element is inside screen, you simply need to place the following javascript code on your page:
On previous example was used only the two callbacks callbackOnTrue and callbackOnFalse that was launched, the first, when element is inside viewport and the second when element is outside the viewport.
But easyScrollPosition can accept also another callback called callbackOnScroll that was launched each page scroll.
When callbackOnScroll is used is possible to pass an object to the function with some reults inside. This object is called "results".