on-screen-example.js

AUI().use(
	'anim',
	'event-onscreen',
	'transition',
	'class-toggle',
	'pop-up',
	function(A) {
		var WIN = A.getWin();

		A.all('.animate-scroll').on(
			'click',
			function(event) {
				event.preventDefault();

				var node = event.currentTarget;

				var section = A.one(node.get('hash'));

				var offset = parseInt(node.attr('data-offset'));

				var scrollTo = parseInt(section.getY());

				if (offset) {
					scrollTo -= offset;
				}

				new A.Anim(
					{
						duration: 0.5,
						easing: 'easeBoth',
						node: 'win',
						to: {
							scroll: [0, scrollTo]
						}
					}
				).run();

				window.history.pushState('','', '#' + node.get('hash'));
			}
		);

		A.all('.lazy-load').each(
			function(node) {
				node.on(
					'onscreen',
					function (e) {
						var datasrc = node.attr('data-src');
						var src = node.attr('src');

						if (src != datasrc) {
							node.attr('src', datasrc);
						}

						node.addClass('lazy-loaded');

						node.detach();
					}
				);
			}
		);

		A.all('.on-screen-helper').each(
			function(node) {
				node.on(
					'onscreen',
					function (e) {
						node.addClass('on-screen');
					}
				);

				node.on(
					'onscreentop',
					function (e) {
						node.addClass('on-screen-top');
					}
				);

				node.on(
					[
						'offscreentop',
						'offscreenbottom',
					],
					function (e) {
						if (node.attr('data-repeat')) {
							node.removeClass('on-screen');
						}

						if (node.attr('data-repeat-top')) {
							node.removeClass('on-screen-top');
						}
					}
				);
			}
		);

		A.all('.sticky').each(
			function(node) {
				node.on(
					'pastscreentop',
					function (e) {
						node.addClass('stuck');
					}
				);

				node.on(
					'beforescreentop',
					function (e) {
						node.removeClass('stuck');
					}
				);
			}
		);

		new A.ClassToggle().render();
	}
);