Class Change Trigger

This is a plugin that triggers a class change on an element based on a trigger element's position within the viewport.

Usage

Include the script on your page, and initialize it with classChangeTrigger();.

An array of objects containing the trigger element, target element, class to apply, distance at which to apply the class, and distance unit can be passed in to the plugin initialization. For example, the code on this page is as follows:

classChangeTrigger.init( [
	{
		trigger: document.querySelector( '.first-trigger' ),
		target: document.querySelector( '.home-link' ),
		class: 'yellow',
		distance: '50',
		unit: '%',
	},
	{
		trigger: document.querySelector( '.second-trigger' ),
		target: document.querySelector( '.home-link' ),
		class: 'gray',
		distance: '50',
		unit: 'px',
	}
] );

Scroll down to see it in action!

When this element is 50% from the top of the viewport, the yellow class will be added to the "Front-end Tools" link.

When this element is 50px from the top of the viewport, the gray class will be added to the "Front-end Tools" link.

Placeholder content