inView

jQuery plugin to detect when DOM elements are in view in the viewport

View the Project on GitHub Mario-Duarte/inView

inView

Simple, small and minimal jQuery plugin to check when DOM elements are in view in the viewport, best of all its less than 500bytes!!!


Quick Navigation:

How it Works

inView returns true or false on call instead of binding to an event, why you may wonder….

I wanted a dead simple plugin that I could reuse on my projects that does what says in the tin and does not get in the way with unnecessary code or events running in the background.

Usage

let isInView = $('elm').inView('both');

This is the simplest way of using this plugin, the code above should return true if both the top and bottom of the element are within the viewport.

$('elm').inView(inViewType, offset);

inViewType can be topOnly, bottomOnly or both and they respectively return true when the top, bottom or both parts of the element is in view in the viewport.

offset, an integer that can help you detect viewport ‘proximity’ if the integer is positive and ‘delay’ if negative.

You can check if an element is in view on scroll, click, resize, load events with ease.

Basic Usage

Here is a simple usage with the jQuery .ready():


	$(document).ready(()=>{

		let elm = $(elm);

		//Check if elm is in view when the page loads
		if ( elm.inView('both') ) {
			elm.addClass('inView');
		}

	});

Advanced Usage

This plugin allows you to pass in the offset in px as follows:

let isInView = $('elm').inView('bottomOnly', 100);

The above will return true when the bottom bounds of the element and an offset of 100px are in the viewport, here’s a more advance usage with a scroll event and offset:


	$(document).ready(()=>{

		function checkVisability() {
			var elm = $('elm');

			elm.each(()=>{
				if ($(this).inView("topOnly", 50)) {
					$(this).addClass("visible");
				} else {
					$(this).removeClass("visible");
				}
			});
		}

		checkVisability();

		$(window).scroll(()=>{
			console.log('scroll');
			checkVisability();
		});

	});

Other plugins

There are a few other plugins that do very similar things to this one that you may want to have a look at: