A zero dependency JavaScript module and jQuery plugin which returns the most visible element from a given set.
<script src="https://unpkg.com/[email protected]/dist/most-visible.min.js"></script>
<!-- OR -->
<script src="https://unpkg.com/[email protected]/dist/most-visible.js"></script>Install via Bun:
$ bun add most-visibleInstall via yarn:
$ yarn add most-visibleInstall via NPM:
$ npm install most-visible --saveThe plugin will automatically be added to any global (window) version of jQuery:
$('.my-elements').mostVisible().addClass('most-visible');
// with options
$('.my-elements').mostVisible({percentage: true, offset: 160}).addClass('most-visible');You can pass in either a selector string:
const element = mostVisible('.my-elements');Or a NodeList:
const element = mostVisible(document.querySelectorAll('.my-elements'));import mostVisible from 'most-visible';
const element = mostVisible('.my-elements');To attach the jQuery plugin to a non-global version of jQuery you must call .makejQueryPlugin:
import $ from 'jquery';
import {mostVisible, makejQueryPlugin} from 'most-visible';
makejQueryPlugin($, mostVisible);
$('.my-elements').removeClass('active').mostVisible().addClass('active');| Option | Type | Description | Default |
|---|---|---|---|
| percentage | boolean |
Whether to calculate the visibility of an element as a percentage of its height | false |
| offset | number |
A pixel offset to use when calculating visibility. Useful for e.g fixed headers. | 0 |
Modify the mostVisible.defaults object to change default option values:
mostVisible.defaults.percentage = true;
mostVisible.defaults.offset = 160;Released under the MIT license