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

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

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="https://code.jquery.com/jquery-3.4.1.min.js" 
        integrity="sha384-vk5WoKIaW/vJyUAd9n/wmopsmNhiy+L2Z+SBxGYnUkunIxVxAv/UtMOhba/xskxh" 
        crossorigin="anonymous">
</script>
<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
$('#Element').scrollRelation({
  relation:'middle'
});

$('#Element').scrollRelation({
  relation:'top'
});

$('#Element').scrollRelation({
  relation:'bottom'
});

3. Invert the scroll position calculation.

$('#Element').scrollRelation({
  invert:true
});

Changelog:

2019-05-11

  • 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.