jQuery scrollFire插件

最新推荐文章于 2024-03-14 07:30:00 发布

Greasy_Giant

最新推荐文章于 2024-03-14 07:30:00 发布

阅读量759

点赞数

分类专栏： jquery Scroll

本文链接：https://blog.csdn.net/larry011/article/details/50639664

版权

jquery 同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

Scroll

1 篇文章 0 订阅

订阅专栏

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