Get The Most Visible Element With jQuery - getMostVisible

getMostVisible is a tiny jQuery plugin that returns the most visible element from a group of elements.

Ideal for one page scrolling website that allows you to do something when most part of an element becomes visible within the viewport.

See also:

• Detect Most Visible Elements

How to use it:

1. Download and insert the jquery.getMostVisible.js plugin after loading jQuery JavaScript library.

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" 
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
        crossorigin="anonymous">
</script>
<script src="jquery.getMostVisible.js"></script>

2. Initialize the plugin to get the most visible element from a group of sectioned content.

<div class="my-container" id="a"></div>
<div class="my-container" id="b"></div>
<div class="my-container" id="c"></div>
<div class="my-container" id="d"></div>
...

var mostVisible = $.getMostVisible({
    selector: '.my-container'
});

3. Apply your own actions to the most visible element.

$(mostVisible).addClass('highlighted');

setTimeout(function() {
  $(mostVisible).removeClass('highlighted');
}, 2000);

Changelog:

2020-08-03

• removed unused code

---

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