jQuery scrollFire插件

来源：互联网发布：arduino摄像头编程编辑：程序博客网时间：2024/05/30 02:23

0x01

http://materializecss.com/scrollfire.html

var options = [    {selector: '#staggered-test', offset: 50, callback: 'Materialize.toast("This is our ScrollFire Demo!", 1500 )' },    {selector: '#staggered-test', offset: 205, callback: 'Materialize.toast("Please continue scrolling!", 1500 )' },    {selector: '#staggered-test', offset: 400, callback: 'Materialize.showStaggeredList("#staggered-test")' },    {selector: '#image-test', offset: 500, callback: 'Materialize.fadeInImage("#image-test")' }  ];  Materialize.scrollFire(options);

实现

            $.fn.scrollFire = function(offset, callback) {                var els = $(this);                $(window).on('scroll',                    function() {                        var viewTop = document.body.scrollTop;                        var viewBottom = viewTop + window.innerHeight;                        els.each(function(index, el) {                            if (!el) return;                            var posTop = $(el).offset().top;                            if ((viewBottom - posTop >= offset - 15) && callback != undefined) {                                callback();                                els.splice(index, 1);                                console.log(offset, viewBottom - posTop);                            }                        });                    });            };            $(function() {                $('#fire,#fire2').scrollFire(50, function() {                    console.log('fired');                })            });

成果

See the Pen ZQqpEZ by chenchen (@larry011) on CodePen.

0 0