viewport.jquery

About

**viewport** is simple but handy jQuery plugin adding methods and CSS selectors to check if element is in certain viewport. Furthermore - you will be able to check position relation of two separate elements even if the are not kins. Plugin uses [getBoundingClientRect()](https://caniuse.com/#search=getBoundingClientRect()) to determine elements positions so be sure it meets your browser support the requirements. ] version 1.x.x uses different detection principe, which will work in almost any browser but works 10-30 times slower

Requirements

• jQuery 3+ (written and tested with 3.3.1)

Installation

Download it from [GitHub](https://github.com/xobotyi/viewport.jquery/releases/latest), or install via NPM:

npm i viewport.jquery

Include it in your JS code or link it in html page

[script src="viewport.jquery.js" type="text/javascript"][/script]

Now you able to

$(".myAwesomeElement:in-viewport").yaay();
// or
$(".myAwesomeElement").viewport().inViewport(); // true if in viewport

Usage

viewport.jquery provides you two different way of relation detection: [CSS pseudo-selectors](#css-pseudo-selectors) and [jQuery methods](#jquery-methods)

CSS pseudo-selectors

All following selectors can be used _without_ parameters and bracket.

**_threshold_** parameter mus