Most Visible is the JavaScript module and jQuery plugin which displays the most visible element from a given collection.

check if element is visible in viewport, javascript check if element is in viewport scroll, how to check if an element is visible on the web page, check if div is in viewport

How to make use of it:

Installation:

# Yarn
$ yarn add most-visible

# NPM
$ npm install most-visible --save

1. The most straightforward jQuery import.

// ES 6
import MostVisible from 'most-visible';

// CommonJS:
const MostVisible = require('most-visible');

2. Load the most-visual.js JavaScript file after the latest jQuery JavaScript library.

<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/dist/most-visible.min.js"></script>

3. Javascript to find out which content section is the most visible within the document and then add a custom CSS class to it.

<div id="sections">
  <section id="top">
    <span class="text">I'm the most visible section!</span>
  </section>
  <section id="middle">
    <span class="text">I'm the most visible section!</span>
  </section>
  <section id="bottom">
    <span class="text">I'm the most visible section!</span>
  </section>
</div>

$(function () {
  var $sections = $('#sections').find('section');

  checkVisibility();

  $(window).on('scroll', function () {
      checkVisibility();
  });

  function checkVisibility() {
      $sections.removeClass('most-visible').mostVisible().addClass('most-visible');
  }
});

4. Decide if you want to calculate visibility as a percentage of altitude.

mostVisible({
  percentage: false
})

5. Select compensation to take into account when calculating visibility.

mostVisible({
  offset: 0
})

Detect Most Visible Elements With jQuery, Most Visible Plugin/Github, jquery check if element is visible in viewport

See Demo And Download

Official Website(andyexeter): Click Here

This superior jQuery/javascript plugin is developed by andyexeter. For extra Advanced Usages, please go to the official website.