Determine How Far Your Element Is In The Viewport - jQuery scrollRelation

File Size: 5.33 KB
Views Total: 466
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Determine How Far Your Element Is In The Viewport - jQuery scrollRelation

scrollRelation is a small viewport checker plugin which determines how far your elements are from the top, bottom or middle of the viewport.

The plugin returns a value (between -1.0 and 1.0) representing the percentage of the target element which is inside or outside of the viewport.

Can be used to create custom scroll-based transitions and animations as the user scroll down the page.

See also:

How to use it:

1. Download and place the JavaScript file scrollRelation.js after jQuery library.

<script src="" 
<script src="scrollRelation.js"></script>

2. Attach the plugin to the target element and specify the viewport position the plugin checks the visibility percentage.

  • -1: cimpletely invisible
  • 1: completely visible
  • 0: centered



3. Invert the scroll position calculation.


4. Set the element height. Default: jQuery outerHeight().

    return this.innerHeight();



  • added contain relation, parameter simplification


  • better mobile browser handling

This awesome jQuery plugin is developed by joe-hx. For more Advanced Usages, please check the demo page or visit the official website.