Kolla om ett objekt är in view

Använder mig av https://github.com/zeusdeux/isInViewport ihop med en egen liten snutt kod.

//https://github.com/zeusdeux/isInViewport
/*
 * @author  Mudit Ameta
 * @license https://github.com/zeusdeux/isInViewport/blob/master/license.md MIT
 */
!function(a,b){function c(b){var c,d=a("<div></div>").css({width:"100%"});return b.append(d),c=b.width()-d.width(),d.remove(),c}function d(e,f){var g=e.getBoundingClientRect(),h=g.top,i=g.bottom,j=g.left,k=g.right,l=a.extend({tolerance:0,viewport:b},f),m=!1,n=l.viewport.jquery?l.viewport:a(l.viewport);n.length||(console.warn("isInViewport: The viewport selector you have provided matches no element on page."),console.warn("isInViewport: Defaulting to viewport as window"),n=a(b));var o=n.height(),p=n.width(),q=n.get(0).toString();if(n[0]!==b&&"[object Window]"!==q&&"[object DOMWindow]"!==q){var r=n.get(0).getBoundingClientRect();h-=r.top,i-=r.top,j-=r.left,k=j+p,d.scrollBarWidth=d.scrollBarWidth||c(n),p-=d.scrollBarWidth}return l.tolerance=~~Math.round(parseFloat(l.tolerance)),l.tolerance<0&&(l.tolerance=o+l.tolerance),Math.abs(j)>=p?m:m=l.tolerance?!!(h<=l.tolerance&&i>=l.tolerance):!!(i>0&&o>=h)}String.prototype.hasOwnProperty("trim")||(String.prototype.trim=function(){return this.replace(/^\s*(.*?)\s*$/,"$1")});var e=function(b){if(1===arguments.length&&"function"==typeof b&&(b=[b]),!(b instanceof Array))throw new SyntaxError("isInViewport: Argument(s) passed to .do/.run should be a function or an array of functions");for(var c=0;c<b.length;c++)if("function"==typeof b[c])for(var d=0;d<this.length;d++)b[c].call(a(this[d]));else console.warn("isInViewport: Argument(s) passed to .do/.run should be a function or an array of functions"),console.warn("isInViewport: Ignoring non-function values in array and moving on");return this};a.fn["do"]=function(a){return console.warn("isInViewport: .do causes issues in IE and some browsers since its a reserved. Use $.fn.run instead i.e., $(el).run(fn)."),e(a)},a.fn.run=e,a.extend(a.expr[":"],{"in-viewport":function(a,b,c){if(c[3]){var e=c[3].split(",");return 1===e.length&&isNaN(e[0])&&(e[1]=e[0],e[0]=void 0),d(a,{tolerance:e[0]?e[0].trim():void 0,viewport:e[1]?e[1].trim():void 0})}return d(a)}})}(window.jQuery,window);

 

(function($) {

	$.fn.objectInView = function() {

		var items = this;
		
		var wh,
			offset,
			whOffset;
		
		if (items.size() > 0)
			init();
			
		function init() {
		
			wh = $(window).height();
			offset = 70; //percent
			whOffset = (wh/100) * offset;
			
			$(window).scroll(animate);
		
		}
		
		function animate() {
		
			items.each(function(index, el) {
			
				var el = $(el);
				var inView = el.filter(':in-viewport( ' + whOffset + ' )' );
				
				// Add class active if in view and remove if not
				if (inView.size() && !el.hasClass('active'))
					inView.addClass('active');
				else if (inView.size() == 0 && el.hasClass('active'))
					$(el).removeClass('active');
			
			});
		
		}
	
	}
	
	$(function() {
		
		// Objects to look for
		$('.page-feature .banner').objectInView();
	
	});

})(jQuery);