我想知道如何操作inview.js脚本,它的触发时刻不是在viewport中的第一个像素处,而是在元素退出时的最后一个像素处,例如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
top = $el.offset().top + 50,
这是可行的!但是我怎样才能改变自下而上的值呢?谢谢特德
最佳答案
我建议使用http://imakewebthings.com/jquery-waypoints/
你可以这样称呼它来达到你想要的效果,从底部起10%:
$('.flyIn').waypoint(function() {
$(this).removeClass('hidden');
$(this).addClass('animated fadeInUp');
}, { offset: '90%' });
关于javascript - 在触发inview.js时进行操作,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/15040386/