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

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="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(); // middle
$('#Element').scrollRelation('top');
$('#Element').scrollRelation('bottom');

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

  • Publication date: 10.05.2019
  • Source