javascript - Check whether top +100px of element is visible -

i'm using jquery visible plugin (https://github.com/customd/jquery-visible) check whether element visible onscreen (and fire svg animation). whole element has visible, problem on screens less vertical space. plugin does provide option trigger when part of element visible onscreen if use animation not been seen. how can trigger animation when top of element +100px visible? think understand following script doing @ each stage, can't figure out change make in order achieve goal:

(function($){  var $w = $(window); $.fn.visible = function(partial,hidden,direction){      if (this.length < 1)         return;      var $t        = this.length > 1 ? this.eq(0) : this,         t         = $t.get(0),         vpwidth   = $w.width(),         vpheight  = $w.height(),         direction = (direction) ? direction : 'both',         clientsize = hidden === true ? t.offsetwidth * t.offsetheight : true;      if (typeof t.getboundingclientrect === 'function'){          // use native browser method, if available.         var rec = t.getboundingclientrect(),             tviz = rec.top    >= 0 && rec.top    <  vpheight,             bviz = rec.bottom >  0 && rec.bottom <= vpheight,             lviz = rec.left   >= 0 && rec.left   <  vpwidth,             rviz = rec.right  >  0 && rec.right  <= vpwidth,             vvisible   = partial ? tviz || bviz : tviz && bviz,             hvisible   = partial ? lviz || lviz : lviz && rviz;          if(direction === 'both')             return clientsize && vvisible && hvisible;         else if(direction === 'vertical')             return clientsize && vvisible;         else if(direction === 'horizontal')             return clientsize && hvisible;     } else {          var viewtop         = $w.scrolltop(),             viewbottom      = viewtop + vpheight,             viewleft        = $w.scrollleft(),             viewright       = viewleft + vpwidth,             offset          = $t.offset(),             _top            = offset.top,             _bottom         = _top + $t.height(),             _left           = offset.left,             _right          = _left + $t.width(),             comparetop      = partial === true ? _bottom : _top,             comparebottom   = partial === true ? _top : _bottom,             compareleft     = partial === true ? _right : _left,             compareright    = partial === true ? _left : _right;          if(direction === 'both')             return !!clientsize && ((comparebottom <= viewbottom) && (comparetop >= viewtop)) && ((compareright <= viewright) && (compareleft >= viewleft));         else if(direction === 'vertical')             return !!clientsize && ((comparebottom <= viewbottom) && (comparetop >= viewtop));         else if(direction === 'horizontal')             return !!clientsize && ((compareright <= viewright) && (compareleft >= viewleft));     } };  })(jquery); 

the current working script can seen @ http://upright.cloudlevel.me need > 768x700px viewport height see animations.

edit - have partially working, animations started first applicable element comes view. how can trigger each applicable element when comes view? script now:

$(function() { var animated = $('.js-animate'),     distance = $(animated).offset().top,     $window = $(window); replacewithpaths(animated); hidesvgpaths(animated);  $window.scroll(function() {      $(animated).each(function(i) {          if ( $window.scrolltop() >= distance ) {             startsvganimation(this);             animated.splice(i,1);         }     });  }); }); 

could not without plugin

you can use $(document).height() height of window

and elementname.offset().top how far element top.

then can compare them

if (elementname.offset().top+100 < $(document).height()) {     //run animation } 

note: might have change take scrolling account using document.scrolltop()