當inview.js正在觸發時操作

Question

我想知道如何操作inview.js腳本，當它的觸發時間不在視口中的第一個像素時，以及最後一次元素外出時，而是例如50像素以後或更早。 inview.js的腳本是

(function ($) { 
function getViewportHeight() { 
    var height = window.innerHeight; // Safari, Opera 
    var mode = document.compatMode; 

    if ((mode || !$.support.boxModel)) { // IE, Gecko 
     height = (mode == 'CSS1Compat') ? 
     document.documentElement.clientHeight : // Standards 
     document.body.clientHeight; // Quirks 
    } 

    return height; 
} 

$(window).scroll(function() { 
    var vpH = getViewportHeight(), 
     scrolltop = (document.documentElement.scrollTop ? 
      document.documentElement.scrollTop : 
      document.body.scrollTop), 
     elems = []; 

    // naughty, but this is how it knows which elements to check for 
    $.each($.cache, function() { 
     if (this.events && this.events.inview) { 
      elems.push(this.handle.elem); 
     } 
    }); 

    if (elems.length) { 
     $(elems).each(function() { 
      var $el = $(this), 
       top = $el.offset().top, 
       height = $el.height(), 
       inview = $el.data('inview') || false; 

      if (scrolltop > (top + height) || scrolltop + vpH < top) { 
       if (inview) { 
        $el.data('inview', false); 
        $el.trigger('inview', [ false ]);       
       } 
      } else if (scrolltop < (top + height)) { 
       if (!inview) { 
        $el.data('inview', true); 
        $el.trigger('inview', [ true ]); 
       } 
      } 
     }); 
    } 
}); 

// kick the event to pick up any elements already in view. 
// note however, this only works if the plugin is included after the elements are bound to 'inview' 
$(function() { 
    $(window).scroll(); 
}); 
})(jQuery); 

所有學分去here

我學嘗試是增加值，以抵消頂部top = $el.offset().top + 50,它的作品！但我怎樣才能改變自下而上的價值？ 感謝泰德

Answer 1

我推薦使用http://imakewebthings.com/jquery-waypoints/

，你可以調用像這樣以10％的從​​底部達到你想要的效果：

$('.flyIn').waypoint(function() { 
    $(this).removeClass('hidden'); 
    $(this).addClass('animated fadeInUp'); 
    }, { offset: '90%' });