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:

• Determine Element Visibility Percentage In jQuery - percentWithinViewport

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
});

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

$('#Element').scrollRelation({
  height:function(){
    return this.innerHeight();
  } 
});

Changelog:

2019-10-09

• added contain relation, parameter simplification

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.