当inview.js正在触发时操作

问题描述:

我想知道如何操作inview.js脚本,当它的触发时间不在视口中的第一个像素时,以及最后一次元素外出时,而是例如50像素以后或更早。 inview.js的脚本是当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,它的作品!但我怎样才能改变自下而上的价值? 感谢泰德

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

,你可以调用像这样以10%的从​​底部达到你想要的效果:

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