当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%' });