使用jquery显示滚动

Question

我使用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();
});

https://jsfiddle.net/yogendrakarekar2015/p5muckqh/