我使用jquery和animate.css创建了一个关于滚动函数的显示。
我必须将此函数调用window.scroll()函数下的div。
我希望创建一个插件，用户可以在document.ready函数或他的js文件中调用插件。并且用户不需要指定window.scroll()功能。
所以我希望返回一个函数。
请解释我如何使用此功能创建插件。 这是我的功能或几乎是一个插件
var windowheight = $(window).height();
var scrollpostop = $(window).scrollTop();
var scroolposbottom = windowheight + scrollpostop;
$.fn.revealonscroll = function(){
return this.each(function(){
if(!$(this).hasClass('hidden-me')){
$(this).css({'opacity': 0}).addClass('hidden-me');
}
var objectoffsettop = $(this).offset().top + $(this).outerHeight();
if(!$(this).hasClass('animation-complete')){
if(scroolposbottom > objectoffsettop){
var animationclass = $(this).data("animation");
$(this).animate({'opacity': 1}).addClass('animated animation-complete').addClass(animationclass);
//.addClass('animated animation-complete').addClass(animationclass)
}
}
});
}; //the revealonscroll function ends here
$(window).scroll(function(){
windowheight = $(window).height();
scrollpostop = $(window).scrollTop();
scroolposbottom = windowheight + scrollpostop;
$('.brown, .violet, .cream').revealonscroll();
});